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

前端之家收集整理的这篇文章主要介绍了如何使用CSS创建网格/平铺视图?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
例如,我有一个类.article,我想查看这个类作为网格视图。所以我应用了这种风格:
.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

那种风​​格会使.article看起来平铺/网格。它的工作精细与固定的高度。但如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌。

并且我想使这样的视图:

解决方法

这种类型的布局称为Masonry布局。 Masonry是另一个网格布局,但它将填充由元素的高度差造成的空白。

jQuery Masonry是一个jQuery插件来创建砖石布局。

或者,您可以使用CSS3 columns。但现在基于jQuery的插件是最好的选择,因为有CSS3列的兼容性问题。

猜你在找的CSS相关文章