左右流动的CSS列

  • Z时代
  • 2024-01-10
  • 分类：问答

假设我有一个div，其中将包含一组元素（div），这些元素可能具有不同的高度，但是所有元素的宽度都相同。

目前，我已经通过同位素+砌体实现了这一目标，但是由于某些浏览器已经支持CSS3多列，因此我希望为这些浏览器提供唯一的CSS解决方案，而其余的则使用Javascript。

这是我一直在尝试的CSS：

.div-of-boxes {
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;
}

但是，这使元素的流动从上到下从左到右。我想要的是左右自上而下的流程。这是我想要的示例：

1 2 3
4 5 6
7 8 9

但这就是我得到的：

1 4 7
2 5 8
3 6 9

在自上而下先于左向右流动的多列元素中，提出了类似的要求，但我对答案不满意，并且它不适用于不同高度的元素。CSS列完全有可能吗？还是有限制？

回答：

多列规范不提供更改列之间元素分布的属性。这样的属性似乎与模块的设计宗旨背道而驰（重新创建报纸或杂志文章的布局方式）。

其他纯CSS解决方案都无法让您获得想要的效果。

以上是 左右流动的CSS列 的全部内容， 来源链接： utcz.com/qa/410945.html

回到顶部