我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航 宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航
当前回答
您可以使用网格CSS属性，是最清晰，干净和直观的方式结构您的盒子。
#{容器 显示:网格; Grid-template-columns: 100px auto; 颜色:白色; ｝ #{固定 背景:红色; grid-column: 1; ｝ 剩余# { 背景:绿色; grid-column: 2; ｝ < div id = "容器" > < div id = "固定" > < / div >固定 剩余< div id = "剩余" > < / div > < / div >
其他回答
如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
我有一个非常简单的解决办法! / / 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/
这似乎达到了你想要的效果。
#{离开 浮:左; 宽度:180 px; background - color: # ff0000; ｝ #{正确 宽度:100%; background - color: # 00 ff00; ｝ < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >
现在，您应该使用flexbox方法(可以适用于所有带有浏览器前缀的浏览器)。
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我尝试了上面的解决方案，左边是液体，右边是固定的，但它们都不起作用(我知道这个问题是相反的，但我认为这是相关的)。以下是行之有效的方法:
.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>
