html - 简单的 2 列 div 布局

Question

我正在尝试用 html 中的 float div 创建一个非常简单的 2 列布局。问题是下面的 div，foot 总是呈现在 right div 的右边。我知道我应该在某处使用 clear 语句，但我不确定哪个位置合适。

此外，正如您在左边看到的那样，我已经明确指定了 left 的高度。有没有一种方法可以将 force right 设置为相同的高度而无需再次指定？

<div id="main">
    <div id="left" style="float: left; width: 150px; background: #DDDDDD; height: 500px;"> 
        left column
    </div>

    <div id="right" style="float: left; background: #EEEEEE;">
        right column
    </div>
</div>

<div id="foot">
    footer
</div>

Answer 1

在 foot div 上使用 clear:both。

对于你的第二个问题，你可以设置main的div有特定的高度，然后设置left和right的高度到 100%。