如何使div填充剩余的水平空间？

Question

如何使div填充剩余的水平空间？我有两个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

这似乎实现了你的目标。

#left {

  float:left;

  width:180px;

  background-color:#ff0000;

}

#right {

  width: 100%;

  background-color:#00FF00;

}

<div>

  <div id="left">

    left

  </div>

  <div id="right">

    right

  </div>

</div>

Answer 2

解决方案来自Display属性。

基本上，您需要使这两个div的行为像表格单元格。所以不要用float:left，你得用display:table-cell在这两个div上，对于动态宽度div，您需要设置width:auto;还有。两个div都应该放在一个100%宽的容器中，display:table财产。

下面是CSS：

.container {display:table;width:100%}#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;}#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;}*html #navigation {float:left;}

以及HTML：

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div></div>

注意：对于InternetExplorer，您需要在动态宽度div上指定Float属性，否则空间将无法填充。

我希望这能解决你的问题。