CSS 列不适用于图像答案

【问题标题】：CSS columns not working with imagesCSS 列不适用于图像
【发布时间】：2017-08-24 23:20:35
【问题描述】：

我有四个不同高度的图像，我想使用 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>

我想要三个图像在顶部，第四个图像在下面的一列。正确地以砌体样式从上/左到下/右填充内容，我缺少什么？

【问题讨论】：

标签： css masonry css-multicolumn-layout

【解决方案1】：

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

图片默认为display: inline。

如果将它们切换为 display: block，column 属性将起作用。

revised codepen

【讨论】：