0

这是代码。

<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. 我相信有更好的方法来设置宽度。谢谢你。

4

2 回答 2

1

我想这个标记会更好http://jsbin.com/apubay/1/edit

于 2012-11-09T00:23:11.167 回答
1

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

  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>

我从容器中删除了 800px 宽度。您可以将其添加回来，但这违背了此解决方案的目的。如果您要设置 800 像素的固定宽度，那么右侧的内容将始终为 300 像素。这里它在 JS Bin 上运行：

JS Bin 例子

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

附带说明一下，我始终建议不要使用overflow: hiddenfor 包含浮点数，因为几个月后您可能会得到剪辑效果并且不记得这是因为您overflow: hidden在这里使用过。请参阅哪种“clearfix”方法最好？

于 2012-11-09T16:05:32.363 回答