Question

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

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

＆＃13;

.columns {
  columns: 3;
}

＆＃13;

<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>

＆＃13;

我想在顶部放置三个图像，在底部放置一个第四个图像。我错过了以正确的方式从顶部/左侧到底部/右侧填充内容？

Answer 1

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

默认情况下，图片为display: inline。

如果您将其切换为display: block，则column属性可用。

revised codepen

CSS列不使用图像

1 个答案: