html - CSS-无法并排放置图像列表

Question

我有一个需要并排对齐的 CSS 图像列表。我的意思是两个相邻的图像应该共享一个公共(public)边界。因此，如果有 20 张图像，我想将它们堆叠成 4 行，每行可以根据屏幕尺寸进行更改。目前，我显然不想要图像之间的空白。我附上了一个 JS-Fiddle 来展示我在做什么。

请帮忙

CSS

 .photo-grid {

    margin: 1em auto;

    max-width: 300%;

    text-align: center;

}



.photo-grid li {



    display: inline-block;

    margin: 1em;

    width: 125px;

}



.photo-grid img {

    display: block;

    height: auto;

    max-width: 100%;

}



.photo-grid figure {

    height: 125px;

    overflow: hidden;

    position: relative;

    width: 125px;

}



.photo-grid figcaption {

    background: rgba(0,0,0,0.8);

    color: white;

    display: table;

    height: 100%;

    left: 0;

    opacity: 0;

    position: absolute;

    right: 0;

    top: 0;

    z-index: 100;

}



.photo-grid figcaption p {

    display: table-cell;

    font-size: 1.5em;

    position: relative;

    top: -40px;

    width: 289px;

    vertical-align: middle;

}


.photo-grid li:hover figcaption {

    opacity: 1;

}

JS Fiddle

Answer 1

要删除图像之间的空格，最简单的方法可能是删除元素之间 HTML 中的任何空白。您的图像设置为 inline-block，这意味着元素之间的空白将像任何其他内联元素一样保留(如 span 或 a或其他)。

另一种方法是在容器上设置font-size: 0，这将使元素之间的空间大小为0，从而将它们从显示中移除。

另一种方法是 float 图像，这将使它们成为 block 级元素(因此不保留空白)并将它们彼此相邻堆叠。

img {
  max-width: 200px;
  height: auto;
}

.font-zero {
  font-size: 0;
}

.float {
  overflow: auto;
}
.float img {
  float: left;
}

<img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"><img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"><img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">

<div class="font-zero">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
</div>

<div class="float">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
  <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg">
</div>