我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航 宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / 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 * /
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
／* * html * /
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
这似乎达到了你想要的效果。
#{离开 浮:左; 宽度:180 px; background - color: # ff0000; ｝ #{正确 宽度:100%; background - color: # 00 ff00; ｝ < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >
如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
尝试添加相对位置，删除右边的宽度和浮动属性，然后添加0值的左和右属性。
此外，您还可以添加左距规则，其值基于左元素的宽度(如果您需要在两者之间留出空间，则要加上一些像素)来保持其位置。
这个例子对我来说很有用:
#search {
width: 160px;
height: 25px;
float: left;
background-color: #FFF;
}
#navigation {
display: block;
position: relative;
left: 0;
right: 0;
margin: 0 0 0 166px;
background-color: #A53030;
}
由于这是一个相当流行的问题，我倾向于分享一个使用BFC的很好的解决方案。 代码样例如下。
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
在这种情况下，overflow: auto触发上下文行为，并使右元素仅扩展到可用的剩余宽度，如果.left消失，它将自然扩展到全宽度。对于许多UI布局来说，这是一个非常有用和干净的技巧，但一开始可能很难理解“为什么它有效”。
