css - 不同大小的 float 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

相反，您需要 float 一个包含两个较小 div 的容器，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/

如果 A 和 C 都 float ，则它们无论如何都不会换行，除非容器的宽度小到足以使它们换行。但是，(所有三个 div 的)容器还需要包含较大的 div，这使得这成为不可能。相反，您需要将它们包装在自己的容器中。