CSS - 如何正确地浮动到伪列

Question

请参阅下图。假设这些都是具有给定id的div。另外，我们假设它们在语义上具有相同的权重，因此它们应该位于html层次结构中的同一点：

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

正确定位它们的正确CSS是什么，以便如下图所示？当浏览器调整大小时，解决方案应该正常流动，并且最好在＆gt; = IE7上工作。

将此视为操作面板（＃1）和3个信息显示（＃2，＃3，＃4），因此可能需要2,3,4扩展宽度以填充浏览器窗口和流程浏览器收缩时，在操作面板下方。

Answer 1

编辑：我刚看完底部，所以我的例子是固定的（宽度）......

id不能是数字，但为了保留您的示例，我将使用拼写的数字。

CSS：

.container { overflow:hidden; /* Clear Floats */ width:400px; }
#one, #two, #three, #four { float:left; }
#one { width:200px; }
#two { width:200px; }
#three { width:100px; }
#four { width:100px; }

示例：http://jsfiddle.net/DOSBeats/CqSTY/

Answer 2

使用此

#id1, #id2, #id3, #id4{ float:left; }
#id1{ width:50%; height:300px; background-color:red; }
#id2{ width:50%; height:50px; background-color:blue; }
#id3{ width:25%; height:250px; background-color:green; }
#id4{ width:25%; height:250px; background-color:yellow; }

演示http://jsfiddle.net/gaby/wsEt6/

---

我更改了您的id，因为它们不允许为数字 http://www.w3.org/TR/html4/types.html#h-6.2

Answer 3

我建议使用容器div。像这样：

<div id="one" class="left"></div>
<div class="right">
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
</div>

Answer 4

将#1, #2, #3, #4换行到容器div #0.5中。向左浮动#1 div，宽度为50%。在名为#1, #2, #3的容器div中换行#container - 向右浮动，宽度为50%。

对#container

中的div执行相同的操作

Answer 5

检查这是否有助于你只需记住修改div，因为你需要根据你需要的屏幕尺寸在div中播放它们：

http://jsfiddle.net/z747R/