Img出现空白间隙的问题

最新推荐文章于 2023-07-22 15:09:25 发布

原创最新推荐文章于 2023-07-22 15:09:25 发布 · 792 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

javaScript 专栏收录该内容

3 篇文章

订阅专栏

问题解决方案来自：
http://www.divcss5.com/wenji/w365.shtml

原始效果：

没有使用float时，红色为背景div内容

采用的第一种方案。
**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来控制