我有2个div:一个在左边,一个在右边。左边的宽度是固定的,我想用右边的填充剩余的空间。

#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; } #{导航 宽度:780 px; 浮:左; background - color: # A53030; } < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航


当前回答

由于这是一个相当流行的问题,我倾向于分享一个使用BFC的很好的解决方案。 代码样例如下。

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

在这种情况下,overflow: auto触发上下文行为,并使右元素仅扩展到可用的剩余宽度,如果.left消失,它将自然扩展到全宽度。对于许多UI布局来说,这是一个非常有用和干净的技巧,但一开始可能很难理解“为什么它有效”。

其他回答

尝试添加相对位置,删除右边的宽度和浮动属性,然后添加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;
    }

.container { 宽度:100%; 显示:表; vertical-align:中间; } .left { 宽度:100%; 显示:表格单元; text-align:中心; } 铃声{ 宽度:40像素; 高度:40像素; 显示:表格单元; 浮:正确; } < div class = "容器" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div

试试这个。这对我很管用。

如果你不需要兼容某些浏览器的旧版本(例如IE 10 8或更低版本),你可以使用calc() CSS函数:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

这似乎达到了你想要的效果。

#{离开 浮:左; 宽度:180 px; background - color: # ff0000; } #{正确 宽度:100%; background - color: # 00 ff00; } < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >

使用显示:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>