Html 简单的2列div布局

我试图创建一个非常简单的2列布局，在html中使用浮动

div

。问题是下面的

div

，

foot

总是呈现在

right

div的右侧。我知道我应该在某处使用

clear

语句，但我不确定哪个是正确的位置

另外，正如您在左侧看到的，我已经明确指定了

left

的高度。有没有一种方法可以在不重新指定的情况下将“力<代码>右侧设置为相同高度？”

<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>

左列
右栏
页脚

使用

清除：在
脚上使用两个

对于第二个问题，您可以将
main
div设置为特定高度，然后将
left
和
right
的高度设置为100%。
这就是您想要的吗

#foot{display: block; clear: both;}

应清除
foot
div

#foot{clear:left/*或两者*/}

至于等高挑战，我建议你使用

请记住，主栏的内容必须多于次栏。如果是这种情况，它将删除500px的高度限制，并且可以灵活地处理您可能需要的任何内容。
您的CSS应该如下所示：

 #foot{
   clear: both;
 } 
 #left, #right{
   float: left; // remove this definiton from tag 
   height: 500px; // remove this definition from tag
 }

希望此帮助创建一个空div，并将其放在右div的末尾，正好在主div的末尾上方，并将其命名为clrbth

在css中，您可以将此属性添加到类中

.clrbth {
clear:both;
margin:0;
padding:0;
}

不起作用，您需要更多，而且，
div的
自然是
块