CSS 列不适用于图像

Question

我有四张不同高度的图片，我想使用 CSS 列做一个类似砖石结构的列网格。以下 CodePen 示例在将 columns 设置为 3 时不会填充第三列:

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>

我想要顶部的三张图片和下面的一列中的第四张图片。我缺少什么才能正确地以砖石样式从上/左到下/右填充内容？

Answer 1

问题的根源似乎是图像的 display 值。

默认情况下，图像display: inline。

如果将它们切换为 display: block，则 column 属性有效。

revised codepen