Html 当第2列标记在第1列之前时，此CSS有效，但反之亦然：我做错了什么？

我做错了什么？我想要两列，左边一列（第1列）流体，右边一列（第2列）固定宽度为300px。只要我在HTML的第1列之前标记第2列，我的代码就可以正常工作。（CSS中id定义的顺序并不重要。）为了标记的可读性，我想在第2列之前标记第1列，但当我这样做时，我会得到一个页面，其中右侧的第2列缺失

CSS

HTML

这项工作：

<div id="col2">
    <p>Hello 2</p>
</div>
<div id="col1">
    <p>Hello 1</p>
</div>

你好2

你好1

这并不是：

<div id="col1">
    <p>Hello 1</p>
</div>
<div id="col2">
    <p>Hello 2</p>
</div>

你好1

你好2

当您将一个元素向右浮动时，表示DOM中该元素后面的所有内容都将流向该元素的左侧。您还有其他可用选项。例如，可以为两个div显示：inline块，并设置垂直对齐：top。您也可以使用display:table单元格。

浮动：右导致问题。它将从文档流中取出并移到右侧。然后渲染其余的元素。由于

div

是块元素，浏览器将清除该行并在其下显示下一个div

---

当你把它们颠倒过来时，div会向右浮动，而另一列会放在正确的位置。

你在div 1右边的边距正在拧紧它。你想在左边浮动div 1，在右边浮动div 2，去掉你的边距

*，html，正文{框大小：边框框；}
正文，html{margin:0；}
#可乐{
浮动：左；
宽度：计算（100%-300px）；
填充：10px；
溢出：隐藏；
边框：1px纯黑；
}
#可乐{
浮动：对；
填充：10px；
宽度：300px；
边框：1px纯红；
}

你好1

你好2

因此，诀窍在于

浮点：右

。如果您不需要支持旧浏览器，您可以查看或。

<div id="col1">
    <p>Hello 1</p>
</div>
<div id="col2">
    <p>Hello 2</p>
</div>