Css 使子div使用设置的宽度同级填充剩余空间

这是代码

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

第一个文本
第二文本

如你所见，我使用宽度：300px以便第二个div占用剩余的正确空间。另一种选择是什么，让它占据整个正确的空间？设置<代码>宽度：100%跳下时没有帮助。 我问的原因是每次我都要数到800-500=300（px）。一旦500px变为550px，我必须将

300px

变为

250px

。我相信有更好的方法来设置宽度。

---

谢谢。

我想这个标记会发挥更好的作用

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

浮动第一个元素并给它一个固定的宽度

将第二个元素显示为块，并为其提供与第一个元素宽度相等的左边距 这是您的代码，经过修改以合并此模式：

<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上运行：

虽然这确实达到了使右元素占用剩余空间的效果（您会注意到它通过调整浏览器宽度来工作），但仍需要在两个位置更改宽度以保持同步：（1）浮动的宽度，以及（2）块的左边距。然而，这比你的解决方案要简单一些，因为不涉及减法；在两个位置使用相同的值。（这也意味着它适用于任何单元：

em

，

px

，

%

）

作为补充说明，我始终建议不要使用

overflow:hidden

来包含浮动，因为几个月后，您可能会获得剪辑效果，但不记得这是因为您在此处使用了

overflow:hidden

。请参阅上的替代解决方案