我想创建一个图片列表,图片之间没有空格。 如果一张图片比其他图片大,则下一张图片应填充可用空间。我尝试了很多显示样式,但找不到解决方案。 https://i.imgur.com/9KicOlw.png
<div class="picturelist">
<div class="pic"><img src="https://localhost/website/includes/img/portrait/pic/1-thumb.jpg" alt="pic"></div>
<div class="pic"><img src="https://localhost/website/includes/img/portrait/pic/10-thumb.jpg" alt="pic"></div>
<div class="pic"><img src="https://localhost/website/includes/img/portrait/pic/11-thumb.jpg" alt="pic"></div>
CSS:
div.picturelist
{
list-style: none;
display: inline-block;
width: 100%;
div.pic{
width: 33%;
display: inline-block;
}
}
最佳答案
您应该查看 Masonry。这就是你想要的:
您还可以使用 CSS 技巧(列)来实现它,如下所示:
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
关于html - img 之间的垂直间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45516681/