html - float 元素彼此相邻/下方

Question

我的代码 http://jsfiddle.net/p796z/1/

HTML

 <div class="box1"> 
    <p>Content Content</p>
    <p>Content Content</p>
    <p>Content Content</p>
</div>

<div class="box2"> 
    <p>Content Content</p>
</div>

<div class="box2"> 
    <p>Content Content Content Content Content Content</p>
</div>

<div class="box2"> 
    <p>Content Content</p>
</div>

CSS

.box1 { background:red; float:left; width:50% }
.box2 { background:yellow; float:left; width:25%; }

从上面的示例中可以看出，第三个黄色框在其他框下方，但在第一个黄色框之间留有这些空白空间，因为第二个黄色框具有更大的高度。我的问题是，无论第二个黄色框的高度是多少，我怎样才能让第三个黄色框出现在第一个黄色框之后。

Answer 1

如果您不严格限于上面的 HTML，您可以将第一个 .box2 div 包装在另一个 div 中，然后将其 float 。给它 25% 的宽度。您可以在下面看到一个示例。

http://jsfiddle.net/LcM7A/

.box1 { background:red; float:left; width:50% }
.box2 { background:yellow; float:left; width:25%; }
.box3{ float:left; width:25%; }
.box4 { background:yellow; float:left; width:100%; }

<div class="box1"> 
    <p>Box 1</p>
    <p>Content Content</p>
    <p>Content Content</p>
</div>

<div class="box3">
    <div class="box4"> 
        <p>Box 4</p>
        <p>Content Content</p>
    </div>

    <div class="box4"> 
        <p>Box 4</p>
        <p>Content Content Content Content Content Content</p>
    </div>
</div>

<div class="box2"> 
    <p>Box 2</p>
    <p>Content Content</p>
</div>