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上4px底部边缘）

http://jsfiddle.net/PKBQH/

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

Answer 1

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

.outside {
    width: 324px;
}

...like this...

Answer 2

这是你想要实现的目标吗？

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

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

    <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 class，以便使用相对定位移动元素：

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

漂浮的div不喜欢垂直向上

2 个答案: