html - 三列布局中的动态宽度第三列

Question

我正在研究三列布局:

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

我想让前两列的宽度固定，第三列占据页面上的剩余空间。只为所有内容设置百分比宽度是一种选择，但不是可取的。

我考虑过的一个选项:

div#first {position: absolute; left: 0; top: 0; width: 150px;}
div#second {position: absolute; left: 150px; top: 0; width: 450px;}
div#third {margin-left: 600px}

我过去曾使用过类似的东西，但收效甚微。也就是说，我发现如果 #first 中有任何 float 元素或 #second , 清除了 #third 中的元素也会清除 #first 中的那些和 #second .虽然可以在没有清除的情况下工作，但我想尽可能避免一个限制。

我意识到我想要的行为确实可以通过以下布局产生:

<table style="width: 100%">
  <tr>
    <td width=150"><div id="first"></div></td>
    <td width=450"><div id="second"></div></td>
    <td><div id="third"></div></td>
  </tr>
</table>

虽然 SEO 在此站点上不是问题，但将表作为根节点感觉不对。

Answer 1

听起来您正在寻找这样的东西:

CSS

<style type="text/css">
  #first,#second {
    float: left;
  }

  #first {
    width: 150px;
    border: 1px solid red;
  }

  #second {
    width: 450px;
    border: 1px solid green;
  }

  #third {
    width: auto;
    overflow: auto;
    border: 1px solid blue;
  }
</style>

HTML

<div id="first">Left</div>
<div id="second">Middle</div>
<div id="third">Right</div>