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

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

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

这是您的代码，已修改为包含此模式：

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

我从容器中移除了800px的宽度。您可以将其添加回去，但这种方法会破坏此解决方案的目的。如果你要设置800px的固定宽度，那么右边的东西总是300px。它在JS Bin上运行：

JS Bin example

虽然这确实实现了使正确元素占用剩余空间的效果（您会注意到它通过调整浏览器宽度来工作），但您仍需要在两个位置更改宽度以使它们保持同步：（1）浮子的宽度，以及（2）块的左边缘。但是，这比您的解决方案稍微容易一些，因为不涉及减法;你在两个地方使用相同的价值。（这也意味着它适用于任何单位：em，px，%。）

作为旁注，我总是建议不要使用overflow: hidden来包含花车，因为在未来几个月你可能会得到剪辑效果而不记得这是因为你在这里使用了overflow: hidden。请参阅Which method of 'clearfix' is best?

使用子宽度为子节点填充剩余空间

2 个答案: