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>

我想要顶部的三张图片和下面的一栏中的第四张图片。我缺少什么来正确地以砖石样式填充从 top/left 到 bottom/right 的内容？

Answer 1

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

图片默认为 display: inline。

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

revised codepen

CSS 列不适用于图像

CSS columns not working with images

css

masonry

css-multicolumn-layout