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