[英]Prevent div from wrapping to next line
I have a list of items, each one has a right aligned part and a left aligned part. 我有一个项目列表,每个项目都有一个右对齐部分和一个左对齐部分。 The left aligned part should expand freely, but stay underneath the right aligned part without pushing it to the next line
左侧对齐的部分应自由扩展,但应留在右侧对齐的部分下方,而不必将其推到下一行
what is happening: 怎么了:
|this is an expanding area of text|
|-other stuff-|
what should happen: 应该发生什么:
|this is an expanding area o|-other stuff-|
^
the last part of the text is cut off here
right now I am using float: right
and float: left
but how do I stop them from wrapping? 现在我正在使用
float: right
和float: left
但是如何阻止它们包装? The other stuff is always the same stuff, but is rendered with a different width on different browsers, so I cannot specify exact widths and use overflow: hidden
其他内容始终是相同的内容,但是在不同的浏览器上呈现的宽度不同,因此我无法指定确切的宽度并使用
overflow: hidden
You can achieve this using a combination of overflow
and float
. 您可以结合使用
overflow
和float
实现此目的。 This works due to the fact that overflow: hidden
establishes a new block formatting context . 这是由于以下事实而起作用的:
overflow: hidden
建立了新的块格式化上下文 。 To paraphrase: 释义:
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).
建立新块格式上下文的常规流中元素的边框(例如,具有“可见”以外的“溢出”元素)不得与该元素在同一块格式上下文中的任何浮点数的空白框重叠本身(在这种情况下,由于浮子,盒子本身可能会变窄)。
See: http://jsfiddle.net/m8x1g0q8/ 请参阅: http : //jsfiddle.net/m8x1g0q8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.