砖石式布局只有CSS

前端之家收集整理的这篇文章主要介绍了砖石式布局只有CSS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如图所示,每个盒子都有不同的高度,有一些双宽度的盒子.

是否可以使用CSS创建砖石式布局?

解决方法

使用 css3支持,您可以这样做:

http://jsfiddle.net/huAxS/2/

.container {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

.container div {
    display: inline-block;
    width: 100%;
    background-color: red;
}​

没有css3的支持,你不得不诉诸于js不幸.

猜你在找的CSS相关文章