css - 不同大小的浮动div

Question

我编写了下面的代码以在 600x400 容器中显示 3 个 div，但遇到了以下问题。请帮忙。

<DIV A style="float:left;width:200px;;height:200px;"></DIV>
<DIV B style="float:left;width:400px;;height:400px;"></DIV>
<DIV C style="float:left;width:200px;;height:200px;"></DIV>

Answer 1

Instead you need to float a container that contains the two smaller divs, a-la:

<div style="float:left">
    <div style=";width:200px;;height:200px;"></DIV>
    <div style="float:left;width:200px;;height:200px;"></div>
</div>

http://jsfiddle.net/ExplosionPIlls/r7b7e/

If A and C are both floated, they won't wrap anyway unless the width of the container is small enough to make them wrap. However, the container (of all three divs) also needs to include the larger div, which makes that impossible. Instead you need to wrap them in their own container.

Answer 2

你的divB 应该是float: right;