html - 防止 div 换行到下一行

Question

我有一个元素列表，每个元素都有一个右对齐部分和一个左对齐部分。左对齐部分应自由展开，但保持在右对齐部分下方，不会将其推到下一行

发生了什么:

|this is an expanding area of text|
                            |-other stuff-|

应该发生什么:

|this is an expanding area o|-other stuff-|
                           ^
            the last part of the text is cut off here

现在我正在使用 float: right 和 float: left 但如何阻止它们换行？其他东西总是相同的东西，但在不同的浏览器上以不同的宽度呈现，所以我无法指定确切的宽度并使用 overflow: hidden

Answer 1

您可以结合使用overflow 和float 来实现这一点。这是因为 overflow: hidden 建立了一个新的 block formatting context。 .换句话说:

The border box of an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself (in which case the box itself may become narrower due to the floats).

参见:http://jsfiddle.net/m8x1g0q8/