我正在尝试别针兴趣类型的布局。
<div id="container" class="cols">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box one">3</div>
<div class="box two">4</div>
</div>
#container {
width: 100%;
max-width: 90%;
margin: 2em auto;
}
.cols {
-moz-column-fill: balance;
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-fill: balance;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
column-fill: balance;
overflow: hidden;
}
.box {
margin-bottom: 20px;
height: 200px;
}
.box.one {
background-color: #d77575;
}
.box.two {
background-color: #dcbc4c;
}
通过互联网上的一些教程，我设法得到了这样的东西。 http://jsfiddle.net/LnG7v/
但问题是盒子被分解以与布局对齐。如果您注意到示例中的框 2 和框 3 已损坏。如何在不破坏盒子的情况下获得相同的布局。