html - 如何让 div 填充剩余的水平空间？

Question

我有 2 个 div: 一个在页面的左侧，一个在页面的右侧。左边的那个有固定的宽度，我希望右边的那个填满剩余的空间。

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}

<div id="search">Text</div>
<div id="navigation">Navigation</div>

Answer 1

我在 Boushley 的回答中发现的问题是，如果右列比左列长，它只会环绕左列并继续填充整个空间。这不是我想要的行为。在搜索了很多“解决方案”后，我找到了一个关于创建三栏页面的教程(现在链接已失效)。

作者提供了三种不同的方式，一种是固定宽度，一种是三列可变，一种是外列固定，中间宽度可变。比我发现的其他示例更优雅、更有效。大大提高了我对 CSS 布局的理解。

基本上，在上面的简单情况下，将第一列向左浮动并给它一个固定的宽度。然后给右边的列一个比第一列宽一点的左边距。而已。完毕。 Ala Boushley 的代码:

这是 Stack Snippets 和 jsFiddle 中的演示

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

<div id="left">  left  </div>
<div id="right"> right </div>

在 Boushley 的示例中，左列将另一列保留在右侧。一旦左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐页面，左列占据了它的大页边距。无需流交互。