如何填充剩余宽度的100％ [英] How to fill 100% of remaining width

问题描述

是否有任何工作可以按预期完成像这样的工作？
我希望有类似于 width：remainder; 或 width：100％ - 32px; 。

width：auto; 无效。

<我认为唯一可能的方法是解决填充/边距，负值或浮动，或者一些html标签破解。我试过还显示：block ;.

我喜欢得到与此相同的结果，没有表

Is there any work around to do something like this work as expected? I wish there were something like that width:remainder; or width:100% - 32px;.

width: auto; doesn't works.

I think the only way possible is working around with paddings/margins, negative values, or float, or some html tags hack. I tried also display:block;.

I like to get the same result as this, without tables 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>

解决方案

Block level elements like <div> will fill 100% of the available width automatically. If you float one of them to the right, the other will fill the remaining space.

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

http://jsfiddle.net/5AtsF/

这篇关于如何填充剩余宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！