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

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


当前回答

物品和容器的规则;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

使用空白:nowrap;为最后一项的文本进行解构。

项目X% |项目Y% |项目Z%

总长度总是= 100%!

if

Item X=50%
Item Y=10%
Item z=20%

然后

项目X = 70%

项目X占主导地位(在表格CSS布局中,第一项占主导地位)!

试着max-content;用于在容器中传播div的div内部属性:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

其他回答

我尝试了上面的解决方案,左边是液体,右边是固定的,但它们都不起作用(我知道这个问题是相反的,但我认为这是相关的)。以下是行之有效的方法:

.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>

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

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

物品和容器的规则;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

使用空白:nowrap;为最后一项的文本进行解构。

项目X% |项目Y% |项目Z%

总长度总是= 100%!

if

Item X=50%
Item Y=10%
Item z=20%

然后

项目X = 70%

项目X占主导地位(在表格CSS布局中,第一项占主导地位)!

试着max-content;用于在容器中传播div的div内部属性:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

如果有人需要相同的解决方案,但没有固定长度的左div:

如果你想让左边的div占据所有的空间,你可以删除固定大小的180px。参见下面的CSS:

#left {
  float: left;
  background-color: red;
}

#right {
  background-color: yellow;
  flex-grow: 1
}

参见这里的JSFiddle: JSFiddle -div-space

我也遇到过类似的问题,我在这里找到了解决方案: https://stackoverflow.com/a/16909141/3934886

解决方案是一个固定的中心div和液体边列。

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

如果你想要一个固定的左列,只需相应地改变公式。