使用纯CSS的双列布局

Question

在更大的固定宽度双列块中有一个名为a，b，c，d的块。

我想要离开c和低于a，可以使用纯CSS完成它吗？

我尝试了什么，

CSS：

.wrapper {
    border: 1px dotted #111;
    width: 360px;
    padding: 20px;
    float: left;
}

.rectangle {
    display: inline-block;
    float: left;
    border: 1px solid #333;
    min-height: 100px;
    width: 178px;
}

#a {
    height: 248px;
}

#b {
    height: 148px;
}

#c {
    height: 198px;
}

#d {
    height: 98px;
}

HTML：

<div class="wrapper">
<div id="a" class="rectangle">a</div>
<div id="b" class="rectangle">b</div>
<div id="c" class="rectangle">c</div>
<div id="d" class="rectangle">d</div>
</div>​

http://jsfiddle.net/imom0/E7GYR/1/

为了简单起见，我不想使用JavaScript或masonry。

Answer 1

尝试使用正确的div float ：http://jsfiddle.net/E7GYR/7/

---

HTML：

<div class="wrapper">
<div id="a" class="rectangle left">a</div>
<div id="b" class="rectangle right">b</div>
<div id="c" class="rectangle right">c</div>
<div id="d" class="rectangle left">d</div>
</div>​

CSS：

.wrapper {
    border: 1px dotted #111;
    width: 360px;
    padding: 20px;
    float: left;
}

.rectangle {
    display: inline-block;
    border: 1px solid #333;
    min-height: 100px;
    width: 178px;
}

.left
{
    float:left;       
}

.right
{
    float:right
}

#a {
    height: 248px;
}

#b {
    height: 148px;
}

#c {
    height: 198px;
}

#d {
    height: 98px;
}
​

Answer 2

您可以使用column-count CSS属性，如下所示：

.wrapper {
    border: 1px dotted #111;
    width: 460px;
    padding: 20px;
    float: left;
    column-count:2;
}

.rectangle {
    display: inline-block;
    border: 1px solid #333;
    min-height: 100px;
    width: 170px; 
}

并将您的HTML重组为：

<div class="wrapper">
<div id="a" class="rectangle">a</div>
<div id="d" class="rectangle">d</div>
<div id="b" class="rectangle">b</div>
<div id="c" class="rectangle">c</div>
</div>

大多数浏览器都支持

column-count各自的供应商前缀。有关更多信息，请参阅caniuse。

An example fiddle can be found here.