html - 当第 2 列在第 1 列之前标记时，此 CSS 有效，反之亦然 : what am I doing wrong?

Question

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

CSS

#col1 {
        width:auto;
        padding: 10px;
        margin-right:300px;
        overflow:hidden;
      }
#col2 {
        float:right;
        padding:10px;
        width: 300px;
      }

HTML

这个有效:

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

这不是:

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

Answer 1

当你向右浮动一个元素时，你是说 DOM 中它之后的所有内容都将流到它的左边。还有其他可用选项供您使用。例如，您可以为两个 DIV 设置 display:inline-block 并设置 vertical-align:top。您也可以使用 display:table-cell。