如何使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 {&nbsp; float:left;&nbsp; width:180px;&nbsp; background-color:#ff0000;}#right {&nbsp; width: 100%;&nbsp; background-color:#00FF00;}<div>&nbsp; <div id="left">&nbsp; &nbsp; left&nbsp; </div>&nbsp; <div id="right">&nbsp; &nbsp; right&nbsp; </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属性，否则空间将无法填充。我希望这能解决你的问题。