如何合并多个img的边框并完全满足div

时间:2018-02-08 17:09:02

标签: html css

我有两个问题:

  1. 如何合并多个图像的边框?我连续有4张图像,每张图像之间有空格,因此边框是分开的。
  2. 我希望每个div的四个图像中的每一个都完全填充div左右两个。
  3. 
    
    img {
      width: 20%;
      border: 1px solid black;
    }
    
    .works {
      text-align: center;
      padding: 10px;
    }
    
    <div class="works" id="works">
      <div class="img">
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
      </div>
      <div class="img">
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
      </div>
    </div>
    &#13;
    &#13;
    &#13;

2 个答案:

答案 0 :(得分:0)

通过在图片中添加float:left;,可以消除差距。

然后,通过仅向每行的第一个图像添加左边框,并且仅向第一行图像添加顶部边框,可以使边框更加均匀。

&#13;
&#13;
img {
  width: 20%;
  border: 1px solid black;
  border-left: none;
  border-top: none;
  float: left;
}
#works .img:first-child img {
  border-top: 1px solid black;
}
.img img:first-child {
  border-left: 1px solid black;
}
&#13;
    <div class="works" id="works">
      <div class="img">
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
      </div>
      <div class="img">
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
        <img src="http://up.pestools.ir/151810863547341_works1.png" />
      </div>
    </div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

空间即将到来,因为默认情况下<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div><img>个元素,而inline-block元素会占用空间来对齐。

您可以使用 Flexbox 删除空格......

...要合并边框,您可以使用inline-block负值。

Stack Snippet

margin
.img {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

img {
  width: 20%;
  border: 1px solid red;
  margin-left: -1px;
  margin-top: -1px;
}

.works {
  padding: 10px;
}