2

在一个更大的固定宽度的两列块内有名为 a、b、c、d 的块。

布局

我想把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。

4

2 回答 2

3

尝试让正确的 div正确浮动：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;
}
​
于 2012-12-14T15:59:51.660 回答
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。

可以在这里找到一个示例小提琴。

于 2012-12-14T16:05:24.630 回答