CSS框定位

向左浮动。小的是中间那个的一半高

.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>

---

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

---

我讨厌我自己做这件事，但不知怎的，它起了作用

.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>

---

你真的应该使用容器，我将发布如何使用table元素，让你决定哪个更干净

.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; }

以下是JSFIDLE：

---

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

还有另一种方法，尽管它相当脆弱，不支持旧浏览器：

---

彼此的渺小意味着什么？对不起，我的英语很差。一个比另一个高。一个小盒子放在另一个盒子上。哦，好吧，没问题，sry，只是不明白我正在试图找到干净的解决方案，没有容器，桌子等等。已经说过，你当然可以用div来做这件事，但我不想帮你发现它不像使用桌子这样的东西那样跨浏览器友好，tr，还有td元素，对不起，我是奥布沃伊斯。但是我的问题的关键是——它没有任何包装就可以解决吗？请记住，在HTML5中，cellspacing不再是一个有效的属性，所以请使用表{border spacing:10px；}@Floremin谢谢你，说实话，我很害怕。我将编辑我的答案。谢谢不错。与我的第二个答案类似，但可能更符合旧浏览器。无意冒犯，Cedric，但是在发布之前，您是否在JSFIDLE中查看过这个问题？

.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; }

.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>

.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>