Question

我有一个CSS图像列表，需要并排排列。我的意思是两个相邻的图像应该共享一个共同的边界。因此，如果有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图像，这将使它们成为块级元素（因此不会保留空白区域）并将它们彼此相邻堆叠。

＆＃13;

img {
  max-width: 200px;
  height: auto;
}

.font-zero {
  font-size: 0;
}

.float {
  overflow: auto;
}
.float img {
  float: left;
}

＆＃13;

<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>

＆＃13;

Answer 2

修正您的边距。如果图片之间有不受欢迎的空白区域，则可能是由于您的1em边距。如果需要，可以放置顶部和底部边距，但不要做一个全部。

Answer 3

首先，你必须制作一个宽度为25％的班组 - ＆gt; col25。然后为每个图像制作三个类，一个用于小型设备 - ＆gt; .scol25，一个用于中型设备 - ＆gt; .mcol25，一个用于大型设备 - ＆gt; .lcol25。

然后删除图像之间的边距，并使框具有边框大小。

.scol25, .mcol25, .lcol25 {
  box-sizing:border-box;
  margin-right:-3px;
  margin-top:-4px;
  text-align:center;
  padding:0px;
}

最后，您可以为每个屏幕尺寸设置宽度和高度，以便始终显示四行四个图像（移动设备除外，每行一个图像）。

<div id="photo-grid">
<img id="img-1" class="photo" alt="alt-of-img"/>
...
<img id="img-16" class="photo" alt="alt-of-img"/>
</div>

不要忘记删除<img>标记之间的空格，以便没有空格。

PS。添加margin-top:-4px因为它无法在在线编译器上运行，因此当您将其添加到页面时，您可以删除该命令。

希望它有所帮助。

链接：jsfiddle.net

如果链接没有显示代码，请告诉我。

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

3 个答案: