img

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：彎曲

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