Question

这个问题已被问过一百万次，但我似乎无法找到我特定版本的解决方案。这就是我所拥有的：

<div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

始终显示div1和div2，有时仅显示div3。 div2和div3有固定的宽度。我希望div1填充div2和可能的div3没有占用的剩余空间。我希望它们以从左到右的顺序出现（[div1] [div2] [div3]）。

任何人都可以帮忙吗？

Answer 1

<强>答案：

请参阅操作：http://jsfiddle.net/C9Q3F/3/

<style>
    div { height:100px; }
    #div1 { background-color:red; }
    #div2 { background-color:blue; width:75px; float:right; }
    #div3 { background-color:green; width:100px; float:right; }
</style>

<div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div1"></div>
</div>

<强>解释

这样做的原因是 - div的顺序发生了变化 - 所以它会将div2和div3写入页面，两者都有固定的宽度，并且float都是。因此，在编写div1时（现在最后），默认的100％宽度将填充可用宽度的100％。由于其他div已经占用了他们的空间，“可用宽度”就是剩下的。

对于其他情况（例如，最后一个div填充空间）：

如果您希望最后一个div填充剩余空格而不是第一个，就像这个问题/答案一样，只需调整它以使用float:left;代替float:right;并更改div顺序和宽度 - 与此相同的概念并且工作正常。

使div填充剩余空间

1 个答案: