Question

我想创建一个图片列表，图片之间没有空格。如果图片比其他图片大，则下一张图片应填入可用空间。我尝试了很多显示样式，但我找不到解决方案。 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;
    }
}

Answer 1

你应该看看砌体。这就是你想要的：

https://masonry.desandro.com/

您还可以使用CSS技巧（列）来实现此功能，如下所示：

-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;

https://codepen.io/anon/pen/KvNJRz

Answer 2

使用display：flex

div.picturelist {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}

img之间的垂直空间

2 个答案: