css - 浮动的 div 不喜欢垂直向上

Question

我有一些 div，都向左浮动，第一个比其他的宽三倍，短一点。当较小的 div 换行并进入下一个“线”时，我希望前三个较小的 div 与较大的 div 的底部齐平。（用文字描述有点棘手，但小提琴会给你这个想法。）

我该如何做到这一点？

标记：

<div class="bigger"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>

风格：

.bigger {
    height: 40px;
    width: 308px;
    margin: 0 4px 4px 0;
    background: red;
    float: left;
}

.smaller {
    height: 60px;
    width: 100px;
    margin: 0 4px 4px 0;
    background: blue;
    float: left;
}

小提琴中最左边的三个蓝色 div 应该根据它们的边距与红色的 div 对齐（红色 div 的底部边距为 4px）

http://jsfiddle.net/PKBQH/

作为记录，看起来 pinterest 通过使用脚本为每个 div 分配绝对位置来完成他们的交错浮动式布局，这是我宁愿不做的事情。

Answer 1

您可以将整个东西包裹在正确宽度的外盒中：

.outside {
    width: 324px;
}

...像这样...

Answer 2

这是你想要达到的目标吗？

http://jsfiddle.net/nickadeemus2002/gDAB2/

HTML：为要向上移动的所有元素添加一个新类“调整”。

    <div class="bigger"></div>
<div class="smaller"></div>

<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller"></div>

<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller"></div>

<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller adjust"></div>

现在创建“调整类，以便它使用相对定位移动元素：

.adjust{
    position:relative;
    top:-20px;
}