14

我有一个包含两个项目的容器 div：a.button和 a.box里面有文本。.button首先出现并向右浮动。.box没有浮点数[这是一个约束 - 由于其他类似的结构依赖于没有浮点数，我无法将其浮动]。.box必须overflow: hidden;建立一个新的块格式化上下文。这允许.box跨越“100% 到”先前的浮动元素.button.

.outer-container容纳所有这些并且浮动正确。

http://jsfiddle.net/6qAwA/5/

在 Chrome（26.0.1410.12 beta-m PC、25.0.1364.99 Mac）、Safari（6.0.2 Mac）和 IE8-9 中，这将以所需的方式运行。.box的文本保持在一行上，并且由于.outer-container' 的正确浮动，将恰好是它需要的大小。然而，在 Firefox 中，文本被分成另一行。

.button当is 向左浮动时，我也发现了一个类似的问题- 除了 Firefox 之外，我在所有东西中都得到了想要的行为。

我已经看到了适用于 PC 的 Firefox 16.0.1 和 19.0，以及适用于 Mac 的 18.0.1 和 19.0。这是一个错误吗？

4

4 回答 4

42

我今天遇到了这个问题，即使在将其设置为之后，浮动节点也只会在 Firefox 中换行，原因是容器节点的样式设置为set to 。因此，在容器节点上重置to的值为我解决了这个问题。displayinline-blockwhite-spacenowrapwhite-spacenormal

于 2013-08-07T11:02:43.457 回答
5

添加display: inline-block;到.box：

演示

于 2013-02-27T01:32:32.167 回答
0

实际上，当您寻求像 http://jsfiddle.net/Volker_E/x5rPd/这样的解决方案时，您 不需要一秒钟div来获得所需的行为。

于 2013-02-27T02:16:17.593 回答
0

white-space: normal没有为我做这个把戏。起作用的是white-space: nowrap;直接文本容器。

于 2014-07-30T12:20:53.103 回答