CSS列不能處理圖像

Question

我有四個不同高度的圖像，我想用CSS列做一個石工般的列網格。

https://codepen.io/glennreyes/pen/pwjOmy

.columns { 
 
    columns: 3; 
 
}

<div class="columns"> 
 
    <img class="image" src="http://lorempixel.com/400/400" alt="" /> 
 
    <img class="image" src="http://lorempixel.com/400/500" alt="" /> 
 
    <img class="image" src="http://lorempixel.com/400/600" alt="" /> 
 
    <img class="image" src="http://lorempixel.com/400/400" alt="" /> 
 
</div>

我想在頂部的三個圖像和第四圖像的一個列的下面：設置當columns至3以下CodePen示例不填充第三列。我錯過了以正確的方式填充砌體樣式的頂部/左側到底部/右側的內容？

Answer 1

看起來問題的根源在於圖像的display值。

圖像默認爲display: inline。

如果將它們切換爲display: block，則column屬性起作用。

revised codepen