-1 
.box {
    float: left;
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px; height: 30px;
}

.box.l { height: 70px; }

有固定大小的盒子漂浮在左边。小号是中号的一半高。

<div class="box s"></div>
<div class="box s"></div>
<div class="box l"></div>
<div class="box s"></div>
<div class="box s"></div>

我怎样才能在不使用任何容器的情况下将小一个排列在一起（2个小容器，然后大一个在右侧，2个小容器再放在另一个容器上）？是否有可能使这些盒子最适合？

有什么建议么？

4

5 回答 5

4

我讨厌自己这样做，但不知何故它有效..

.box {
    display: block;
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px;
    height: 30px;
    overflow: hidden;
}

.box.l { height: 70px; float: left; position: relative; left: 110px; top: -80px; }
.box.l + .box.s,
.box.l + .box.s + .box.s { position: relative; top: -80px; left: 110px; }

http://jsfiddle.net/nEMxZ/13/

（你真的应该使用容器）

于 2013-04-02T13:53:02.490 回答
1

好吧，我只是要发布如何使用 table 元素来做到这一点，我会让你决定哪个更干净。

.box {
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px;
    height: 30px;
}

.boxes {
    border-spacing: 10px;
}

<table class="boxes">
    <tr>
        <td class="box"></td>
        <td class="box" rowspan="2"></td>
        <td class="box"></td>
    </tr>
    <tr>
        <td class="box"></td>
        <td class="box"></td>
    </tr>
</table>

这是jsfiddle：http: //jsfiddle.net/nEMxZ/22/

如果你决定在这里使用一张桌子，我想我已经把它弄得尽可能干净了。请注意，我已经减轻了对盒子本身的两个不同类的需求，但为表格添加了一个。

于 2013-04-02T14:00:59.267 回答
0

通常这需要将元素嵌套在网格中：

http://jsfiddle.net/isherwood/nEMxZ/11/

.wrapper {
    float: left;
}
.box {
    float: left;
    clear: left;
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px;
    height: 30px;
}
.box.l {
    height: 70px;
}


<div class="wrapper">
    <div class="box s"></div>
    <div class="box s"></div>
</div>
<div class="wrapper">
    <div class="box l"></div>
</div>
<div class="wrapper">
    <div class="box s"></div>
    <div class="box s"></div>
</div>
于 2013-04-02T13:48:17.480 回答
0

这是另一种方法，虽然它相当脆弱并且不支持旧浏览器：

http://jsfiddle.net/isherwood/nEMxZ/19/

.box {
    float: left;
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px;
    height: 30px;
}
.box.l {
    height: 70px;
    margin-top: -40px;
}
.box.s:nth-child(2) {
    clear: left;
}
.box.s:nth-child(4) {
    margin-top: -40px;
}

<div class="box s">One</div>
<div class="box s">Two</div>
<div class="box l">Three</div>
<div class="box s">Four</div>
<div class="box s">Five</div>
于 2013-04-02T14:01:24.243 回答
-1

像这样？

.box.l {
    float: right;
    clear: both;
}

.box.s { 
    clear: both;
}

您的 jsFiddle 已编辑

于 2013-04-02T13:44:52.487 回答