Question

我有一个非常基本的两列布局。第一列的背景颜色为白色，第二列为绿色。我通过以下方式非常简单地完成：

#col1 { 
  background-color: white; 
  float: left; 
}

#col2 { 
  background-color: green
}

<div id="col1">

</div>
<div id="col2">
  <!-- green background, and needs to fill up the remaining width, so i can't float left */ 
</div>

为什么第二列跨越整个页面宽度并位于第一列后面？我只想要两个列，一个是固定宽度的，第二个是用完页面的其余部分。

似乎很简单。有一个更好的方法吗？

这是一个小提琴： http://jsfiddle.net/yrkrJ/1/

Answer 1

您好现在给overflow:hidden

就像这样

#header-banner {
    overflow:hidden;
}

的 Demo 的

Answer 2

因为您将 float 定义为第一个DIV。所以，第二个div不承认高度。像这样写

#col2 {
    overflow:hidden;
}

选中此http://jsfiddle.net/yrkrJ/4/

阅读此内容以获取更多http://www.quirksmode.org/css/clearing.html

非常基本的两列布局。为什么第二列落后于第一列？

2 个答案: