如何填充剩余宽度的 100% [英] How to fill 100% of remaining width
问题描述
是否有任何解决方法可以按预期执行此类工作?我希望有这样的东西 width:remainder;
或 width:100% - 32px;
.
width: auto;
不起作用.
我认为唯一可能的方法是使用填充/边距、负值或浮点数,或者一些 html 标签破解.我也试过显示:块;.
我喜欢得到与此相同的结果,没有表格
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>
Updated answer:
The answers here are pretty old. Today, this can be achieved easily with flexbox:
.container {
border: 4px solid red;
display: flex;
}
.content {
border: 4px solid green;
flex-grow: 1;
margin: 5px;
}
.sidebar {
border: 4px solid blue;
margin: 5px 5px 5px 0;
width: 200px;
}
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet.
</div>
<div class="sidebar">
Lorem ipsum.
</div>
</div>
Original answer:
Block level elements like <div> will fill 100% of the available width automatically. If you float one of them to the right, the contents of 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>
这篇关于如何填充剩余宽度的 100%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!