【问题标题】：Make div take remaining width让 div 取剩余宽度
【发布时间】：2015-05-01 19:03:14
【问题描述】：

我有以下代码

<div style="float:left;height:16px; background:grey; width:200px;"></div>
<div style="float:left;height:16px; background:lightblue; width:100px;"></div>

是否可以让第二个 div 占据所有剩余宽度而不使用表格？

这里是用于澄清的 JSFiddle http://jsfiddle.net/xtkoycyv/

【问题讨论】：

使用 % 代替 px？
我认为您正在寻找 display 属性。 (`display:table;`)
这是与其他答案一起使用的另一个解决方案 - stackoverflow.com/a/6487192/3377049 这是我做的一个更适合你的小提琴.. jsfiddle.net/Hastig/SpSjL/2881

标签： html css

【解决方案1】：

是的...从第二个 div 中移除浮动

<div style="float:left;height:16px; background:grey; width:200px;">this text</div>
<div style="height:16px; background:lightblue;">that text</div>

【讨论】：

感谢您的回答，但我注意到它已经可以通过仅删除 float:left 来工作。
大声笑，你是绝对正确的！！！ div 是块元素，因此根据定义将是 100% 宽度。我已经更新了我的答案。
@Aaron：这实际上不起作用。这只是使工作的外观。浮动元素只是“坐在”另一个元素的顶部，将“浅蓝色” div 隐藏在其后面。
@jbutler483 不确定它是伙伴，它是浮动的而不是绝对定位的？在我的答案中添加了副本以显示它正在工作。
@Aaron：它在这方面有效，但看看this - 它可能会澄清一些事情。由于浮动元素将其从 dom 中取出，它使其他 div 的行为有所不同。这就是为什么浮动会被用作最后一种资源的原因，因为它的机制在最好的时候可能很难遵循。

【解决方案2】：

您可以使用 CSS3 中可用的 calc() 属性

<div style="float:left;height:16px; background:grey; width:200px;"></div>
<div style="float:left;height:16px; background:lightblue; width:calc(100% - 200px);"></div>

JSFiddle

【讨论】：

直到现在我才知道我是如何错过了解 calc 的。现在保证金交易会容易得多。
使用 calc 安全吗？
caniuse.com/#feat=calc - 已知问题。至少要记住三件事。当然是 IE 相关的。
@ZeroCool 是的。你绝对可以使用它。

【解决方案3】：

使用计算

对此有几种不同的解决方案。其中之一是使用 calc 函数。

calc() 函数允许数学表达式加法 (‘+’)、减法 (‘-’)、乘法 (‘*’) 和除法 (‘/’) 用作组件值。 “calc()”表达式表示它包含的数学计算的结果，使用标准运算符优先级规则。它可以在任何地方使用， , , , , 或值是允许。 ‘calc()’ 表达式的组成部分可以是文字值， ‘attr()’ 或 ‘calc()’ 表达式，或解析的值为上述类型之一。

.div1 {
  height: 16px;
  background: grey;
  width: 200px;
  float: left;
}
.div2 {
  height: 16px;
  float: left;
  background: lightblue;
  width: calc(100% - 200px);
}

<div class="div1"></div>
<div class="div2"></div>

使用显示：表格

您也可以使用display: table 选项。 注意：这不是使用表格

.wrap {
  display: table;
  width: 100%;
}
.div1 {
  height: 16px;
  background: grey;
  width: 200px;
  display: table-cell;
}
.div2 {
  height: 16px;
  background: lightblue;
  display: table-cell;
}

<div class="wrap">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

【讨论】：

【解决方案4】：

使用计算（100%-1st div）

Div1 - 20% Div2 - 80%

如果您需要使用剩余宽度，请使用 % 或 jquery 函数计算其宽度

使用脚本

 $(document).ready(function()
 {
     var div1 = $("div1").width();
     var div2 = (100%) - (div1+'px');
     $(div2).css('width',div2);
 });

【讨论】：

【解决方案5】：

您可以使用 % 代替 px 并从第二个 div 中删除 float:left 代码如下：

<div style="float:left;height:16px; background:grey; width:200px;"></div>
<div style="height:16px; background:lightblue; width:100%;"></div>

【讨论】：

看起来与我的答案重复 :)