实现多列布局中的行填充-Row-wiseFillinginMulti-ColumnLayoutswithCSS

我有一个非常有效的多列布局，用于以平铺格式展示图片等元素。然而，我希望这些元素能够按照时间顺序排列。虽然可以通过查询按最后修改时间获取数据，但当前的布局仍然按列进行排序。

例如，当前的布局如下：

A1 | B1 | C1 | D1

A2 | B2 | C2 | D2

A3 | B3 | C3 | D3

但我希望它看起来像这样：

A1 | A2 | A3 | B1

B2 | B3 | C1 | C2

C3 | D1 | D2 | D3

如何在多列布局中实现这种行填充效果？如果不使用多列布局，我可以实现这种效果，但在较小的屏幕上会失去响应式设计。有没有一种更简单的方法使多列表现得像我想要的那样，或者我必须为每个设备大小单独处理？

解决方案

#1

是的，你可以使用CSS的float: left布局来轻松实现这一效果。以下是一个示例：

.flex-container {
  display: block;
  height: 450px;
  width: auto;
}

.flex-item {
  height: 100px;
  width: 100px;
  float: left;
  background: gray;
  margin: 0 10px 10px 0;
}

这种方法适用于所有现代浏览器，并且完全适合移动设备。