CSS 2列布局：列高度

Question

我正在使用 div 构建一个简单的双列 HTML 布局。

问题在于，我无法使 right 列的高度与 left 列相同。

<div id="container">

    <div id="left" style="float: left; width: 200px; background: #DDFFDD;">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>

    <div id="right" style="float: left; width: 600px; background: #DDDDFF">
        <p>main</p>
    </div>
</div>

您可以看到右侧列的高度与左侧列不匹配。我希望它们能够相等。

编辑：我们无法知道高度，因为列内的内容将是动态的。而且，left 或 main 中的内容可能是最大高度。

- Mike

Answer 1

这个网站有一个非常好的解释，我很难超越或者赶上。

祝你好运！

- user827080

Answer 2

如果您只想让它们具有相同的高度，请明确声明。如果您希望它们都能够扩展，并且最高的一个决定了两者的高度，请重新表述问题。

只需将以下内容添加到您的两个样式标签中即可

style="height: 500px;"

- Bobby Borszich

Answer 3

我会建议在这个练习中使用 table，但那是另一个争论的话题。

你尝试设置 div 的高度了吗？

- Barry Kaye