Question

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

另外，正如你在左边看到的那样，我明确指出了left的高度。有没有办法将力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

在clear:both div。

上使用foot

对于第二个问题，您可以将main div设置为具有特定高度，然后将left和right的高度设置为100％。

Answer 2

您的CSS应如下所示：

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

希望这个帮助

Answer 3

这是你想要的吗？

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

Answer 4

应清除foot div。

#foot { clear: left /* or both */; }

至于同等高度挑战，我建议你使用faux-column technique by Roger Johansson。

请记住，主列必须包含比第二列更多的内容。如果是这种情况，它会删除500px高度约束，并且可以灵活地处理您想要的任何内容。

Answer 5

创建一个空div并将其放在右div的末尾，就在主div的末尾上方，并给它命名为clrbth ..

在css中你可以将这个属性添加到类

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

简单的2列div布局

5 个答案: