浮动元素彼此相邻/下方

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中，然后将其浮动。给它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>