使用Calc

Question

我有以下代码

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

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

<强> JSFiddle

Answer 3

使用Calc

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

calc（）函数允许添加数学表达式（'+'），减法（' - '），乘法（'*'）和除法（'/'）到用作组件值。 'calc（）'表达式表示它包含的数学计算结果，使用标准运算符优先级规则。它可以在任何地方使用， ,,,或值是允许。 'calc（）'表达式的组件可以是字面值， 'attr（）'或'calc（）'表达式或解析的值到上述类型之一。

＆＃13;

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

＆＃13;

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

＆＃13;

使用Display：Table

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

使用calc（100％-1st div）

Div1 - 20％ Div2 - 80％

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

使用脚本

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

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

使div保持宽度

5 个答案:

使用Calc

使用Display：Table