CSS - 如何正确浮动到伪列中答案

【问题标题】：CSS - How to float correctly into pseudocolumnsCSS - 如何正确浮动到伪列中
【发布时间】：2012-05-23 22:17:38
【问题描述】：

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

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

正确放置它们以如下图所示的正确 CSS 是什么？解决方案应该在调整浏览器大小时正常运行，并且最好在 >=IE7 上运行。

将其视为一个操作面板（#1）和 3 个信息显示（#2、#3、#4），因此可能预期 2、3、4 的宽度会扩大以填充浏览器窗口并流动随着浏览器缩小，在操作面板下方。

【问题讨论】：

@Jakub - 仅适用于 #1，请参阅更新

标签： html css positioning css-float

【解决方案1】：

使用这个

#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/ 上的演示

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

【讨论】：

所以这完全是明确设置高度和宽度的问题？比我想象的要容易得多。
@George，是的 - 用于完全流畅的设置。虽然这不适用于您希望 #id1 固定宽度的更新问题。

【解决方案2】：

编辑：我刚刚阅读了底部部分，所以我的示例是固定的（宽度）...

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/

【讨论】：

很好，但是 2,3 和 4 不会根据视口宽度扩展。当我注意到 OP 的这一要求时，我正要为你投票。

【解决方案3】：

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

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

【讨论】：

是的，这是最好的完成方式，但这是作弊，它将 2,3,4 置于与 1 不同的语义级别。更糟糕的是，它无法在所有集合中正常工作-UPS。假设 #2 是其长度的一半，那么随着浏览器窗口水平缩放，#4 应该在 #1 下方流动，而 #2 和 #3 保持原位

【解决方案4】：

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

对#container中的div做同样的事情

【讨论】：

【解决方案5】：

检查这是否对您有帮助，只记得根据您需要的屏幕尺寸在 div 中根据需要修改 div：

http://jsfiddle.net/z747R/

【讨论】：