如何填充100%的剩余宽度

Vit*_*.us 13 html css layout fluid-layout

是否有任何工作可以像预期的那样做这样的工作?我希望有类似的东西width:remainder;或者width:100% - 32px;.

width: auto; 不起作用.

我认为唯一可能的方法是使用填充/边距,负值或浮点数,或者某些html标签黑客攻击.我试过也显示:block;.

我喜欢得到与此相同的结果,没有表http://jsfiddle.net/LJGWY/

在此输入图像描述

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
    <div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>
Run Code Online (Sandbox Code Playgroud)

Bra*_*ano 10

块级元素(如<div>)将自动填充100%的可用宽度.如果将其中一个向右浮动,另一个将填充剩余空间.

<div style="height: 100px; border: 3px solid red;" id="container">
  <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
  <div style="border: 3px solid green;">Fill</div>
</div>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/5AtsF/

  • 即使您设置`display:block;`,它也不适用于非div元素。 (2认同)