问题解决方案来自:
http://www.divcss5.com/wenji/w365.shtml
原始效果:
采用的第一种方案。
**img 通过CSS对图片加一个浮动属性,img{ float:left }。
后续元素如果有div,添加 float:clear 处理**
处理后:
页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>查看图片</title>
</head>
<style media="screen">
html,body,div,label,section{margin: 0px;padding: 0px;width: 100%;}
img{width: 100%;height: 222px; margin: 0px;padding: 0px;overflow: hidden;}
h1{text-align: left;font-size: 12px;color: #AAA;padding-left: 8px;}
.btn{text-align: center;font-size: 12px;color: #AAA;background-color: #800;padding: 8px;display: block;}
.hide{display: none;}
div input:checked+div section{display: block;}
div input:checked+div label{display: none;}
div section{display: none;}
label:checked{display: none;}
.line{height: 10px;background-color: #AAA;width: 100%;}
.divcss5 img{ float:left }
</style>
<body>
<h1>题干</h1>
<div class="line"></div>
<div class="divcss5" style="background-color:#F00;">
<img src="q_pic.png" alt="题干" border="10">
</div>
<div style="clear:both"/>
<div class="line"></div>
<div>
<input type="radio" name="viewAns" value="1" id="viewAns" class="hide">
<div>
<label class="btn" for="viewAns">点击查看答案</label>
<section>
<h1>答案</h1>
<div class="line"></div>
<img src="a_pic.png" alt="答案">
</section>
</div>
</div>
</body>
</html>
图片 1:
图片2:
重点:
1. 图片空隙处理方案
2. 按钮点击事件通过css来控制