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 的示例中，左列包含右侧的另一列。一旦左列结束，右列就会再次开始填充整个空间。在这里，右栏只是进一步对齐到页面中，而左栏占据了它的大边距。无需流程交互。