一尘不染

如何创建网格/平铺视图?

css

例如,我有一些.article类,并且我想将该类作为网格视图进行查看。所以我采用了这种风格:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

这种样式将使.article看起来平铺/网格化。固定高度可以正常工作。但是,如果我要将高度设置为自动(根据其中的数据自动拉伸),则网格看起来很讨厌。


阅读 517

收藏
2020-05-16

共1个答案

一尘不染

这种布局称为砌体布局。石工是另一种网格布局,但它将填充由元素高度不同引起的空白。

jQuery Masonry是创建砌体布局的jQuery插件之一。

另外,您可以使用CSS3 column。但是目前基于jQuery的插件是最好的选择,因为CSS3列存在兼容性问题。

2020-05-16