砖石风格的布局只有CSS [英] Masonry-style Layout ONLY with CSS
本文介绍了砖石风格的布局只有CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
正如您在图片中可以看到的,每个框都有不同的高度,并且有一些框有双倍宽度。
是否可以使用CSS创建砖石风格的布局?
解决方案
使用css3支持,您可以这样做:
.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。 p>
As you can see in the image every box has a different height and there are some boxes with double width.
Is it possible to create a masonry-style layout only with CSS?
解决方案
With css3 support you could do this:
.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;
}
With no css3 support, you have to resort to js unfortunately.
这篇关于砖石风格的布局只有CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文