我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航 宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航
当前回答
我尝试了上面的解决方案，左边是液体，右边是固定的，但它们都不起作用(我知道这个问题是相反的，但我认为这是相关的)。以下是行之有效的方法:
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}
.right {float:right; width:150px;}
<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
其他回答
@Boushley的回答是最接近的，但是有一个问题没有解决，但已经指出了。右边的div取浏览器的整个宽度;内容采用预期的宽度。为了更好地看待这个问题:
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
http://jsfiddle.net/79hpS/
内容在正确的位置(在Firefox中)，但是宽度不正确。当子元素开始继承width时(例如，width: 100%的表)，它们被赋予的宽度等于浏览器的宽度，导致它们溢出页面的右侧并创建一个水平滚动条(在Firefox中)或不浮动并向下推(在chrome中)。
您可以通过向右列添加overflow: hidden来轻松解决这个问题。这将为内容和div提供正确的宽度。此外，表格将接收正确的宽度，并填充可用的剩余宽度。
我尝试了上面的一些其他解决方案，它们在某些边缘情况下并不完全有效，而且太复杂了，无法进行修复。这很有效，也很简单。
如果有任何问题或顾虑，请尽管提出来。
最简单的解决方法是使用保证金。这也将是响应!
<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
我想知道为什么没有人把position: absolute和position: relative放在一起使用
所以，另一个解决方案是:
HTML
<header>
<div id="left"><input type="text"></div>
<div id="right">Menu1 Menu2 Menu3</div>
</header>
CSS
header { position: relative; }
#left {
width: 160px;
height: 25px;
}
#right {
position: absolute;
top: 0px;
left: 160px;
right: 0px;
height: 25px;
}
Jsfiddle例子
.container { 宽度:100%; 显示:表; vertical-align:中间; ｝ .left { 宽度:100%; 显示:表格单元; text-align:中心; ｝ 铃声{ 宽度:40像素; 高度:40像素; 显示:表格单元; 浮:正确; ｝ < div class = "容器" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div
试试这个。这对我很管用。
我在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> .
在鲍什利的例子中，左边一列表示右边另一列。只要左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐到页面中，而左列占据了它的大空白。不需要流交互。
