我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航 宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航
当前回答
我也遇到过类似的问题，并想出了以下行之有效的方法
CSS:
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML:
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
这个方法不会在窗口收缩时自动换行，但会自动展开“内容”区域。它将为站点菜单(左)保持一个静态宽度。
以及自动展开内容框和左侧垂直框(站点菜单)的演示:
https://jsfiddle.net/tidan/332a6qte/
其他回答
我在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> .
在鲍什利的例子中，左边一列表示右边另一列。只要左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐到页面中，而左列占据了它的大空白。不需要流交互。
最简单的解决方法是使用保证金。这也将是响应!
<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
您可以使用网格CSS属性，是最清晰，干净和直观的方式结构您的盒子。
#{容器 显示:网格; Grid-template-columns: 100px auto; 颜色:白色; ｝ #{固定 背景:红色; grid-column: 1; ｝ 剩余# { 背景:绿色; grid-column: 2; ｝ < div id = "容器" > < div id = "固定" > < / div >固定 剩余< div id = "剩余" > < / div > < / div >
我有一个非常简单的解决办法! / / HTML
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
/ / CSS
#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}
链接:http://jsfiddle.net/MHeqG/
现在，您应该使用flexbox方法(可以适用于所有带有浏览器前缀的浏览器)。
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
