使浮动框适合空的空间

Question

我试图制作一个四个盒子浮动并且宽度和高度不同的布局。它们处于2x2网格中。

到目前为止我所得到的只有一个案例，它没有做我需要的事情，并在下面的小提琴中表示： http://jsfiddle.net/ULjCK/2/

此演示中的布局非常基本：

<div class="grid">
    <div class="cell wide short">1</div>
    <div class="cell">2</div>
    <div class="cell clear-left">3</div>
    <div class="cell">4</div>
</div>

我喜欢方框3占据其上方的可用空间，并放在方框1旁边。 如果我让两个盒子向左浮动并且两个盒子向右浮动我有点解决这个问题，但我在横向上遇到了同样的问题。

Answer 1

如何给第三个细胞带来负边缘？它工作正常;看到更新的小提琴：http://jsfiddle.net/ULjCK/4/。

代码：

.clear-left {
    clear: left;
    margin-top: -25px; /* added */
}