制作一个小孩div用设置宽度兄弟填充剩余空间

Question

以下是代码。

<div style="overflow:hidden; width:800px;"> 
    <div style="float:left; width:500px;"> 
    first text 
    </div> 
    <div style="float:left; width:300px;"> 
    second text 
    </div> 
</div> 

正如你看到的我用width:300px;从而使第二个div需要的空间权的其余部分。使整个空间占据整个空间的另一个选择是什么？设置width:100%;没有帮助，因为它跳下来。 我问的原因是每次我必须计算800-500 = 300（px）。一旦500px更改为550px，我必须将300px更改为250px。我相信有更好的方法来设置宽度。 谢谢。

Answer 1

我想这将标记更好地发挥http://jsbin.com/apubay/1/edit

Answer 2

这个问题的一般解决方法是

1. 浮动的第一个元素，并给它一个固定的宽度。
2. 将第二个元素显示为一个块，并给它一个等于第一个元素宽度的左边距。

这里是你的代码，修改为将这一模式：

<div style="overflow: hidden;"> 
    <div style="float: left; width: 500px;"> 
    first text 
    </div> 
    <div style="display: block; margin-left: 500px;"> 
    second text 
    </div> 
</div> 

我删除从容器800像素宽度。您可以将其添加回去，但这种方式会破坏此解决方案的用途。如果您要设置800px的固定宽度，那么右侧的内容总是300px。这是在JS斌运行：

JS Bin example

虽然这确实实现做出正确的元素占用的剩余空间的效果（你会发现，它的工作原理通过调整浏览器的宽度），你仍然会需要在两个地方改变宽度以使它们保持同步：（1）浮点的宽度，以及（2）块的左边距。然而，这比在你的解决方案中稍微简单一些，因为不涉及减法;你在这两个地方使用相同的值。 （这也意味着它可以用于任何单位：em，px，%）

作为一个方面说明，我总是建议不要使用overflow: hidden含彩车因为几个月在路上你可能会裁剪效果，而不是记住它是因为你在这里使用了overflow: hidden。在Which method of 'clearfix' is best?

查看替代解决方案