我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航 宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航
当前回答
这里有一个小的解决方案，它可以防止右列落在左列下面。更换宽度:100%;带溢出:隐藏;如果有人不知道的话，这是个棘手的解决方案。
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
http://jsfiddle.net/MHeqG/2600/
[编辑]还有一个三列布局的例子: http://jsfiddle.net/MHeqG/3148/
其他回答
由于这是一个相当流行的问题，我倾向于分享一个使用BFC的很好的解决方案。 代码样例如下。
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
在这种情况下，overflow: auto触发上下文行为，并使右元素仅扩展到可用的剩余宽度，如果.left消失，它将自然扩展到全宽度。对于许多UI布局来说，这是一个非常有用和干净的技巧，但一开始可能很难理解“为什么它有效”。
最简单的解决方法是使用保证金。这也将是响应!
<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
我也遇到过类似的问题，我在这里找到了解决方案: https://stackoverflow.com/a/16909141/3934886
解决方案是一个固定的中心div和液体边列。
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
如果你想要一个固定的左列，只需相应地改变公式。
我在Boushley的答案中发现的问题是，如果右列比左列长，它就会围绕着左列并继续填充整个空间。这不是我想要的行为。在搜索了许多“解决方案”后，我找到了一个教程(现在链接死了)，如何创建三列页面。
作者提供了三种不同的方法，一种是固定宽度，一种是三个可变列，一种是固定外列，中间可变宽。比我发现的其他例子更加优雅和有效。显著提高了我对CSS布局的理解。
基本上，在上面的简单例子中，将第一列向左浮动，并给它一个固定的宽度。然后给右边的一列留出比第一列稍宽的左距。就是这样。完成了。Ala Boushley的代码:
下面是Stack Snippets & jsFiddle中的一个演示
#{离开 浮:左; 宽度:180 px; ｝ #{正确 margin-left: 180 px; ｝ /*只是为了突出div，例如*/ #left {background-color:粉色;｝ #right {background-color:浅绿色;} <div id="left"> left </div> . <div id="right"> right </div> .
在鲍什利的例子中，左边一列表示右边另一列。只要左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐到页面中，而左列占据了它的大空白。不需要流交互。
解决方案来自display属性。
基本上你需要让两个div像表格单元一样。所以不是使用float:left，你必须在两个div上使用display:table-cell，对于动态宽度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>
重要提示:对于Internet Explorer，您需要在动态宽度div上指定float属性，否则空间将不会被填充。
我希望这能解决你的问题。 如果你愿意，你可以在我的博客上阅读关于这一点的完整文章。
