html - html 元素与 float:left 和 float:right 对齐

Question

这是我经常遇到的一个非常基本的 html-css 查询。大多数时候，我以某种方式找到解决方案，但我很想知道 UI 的这种意外行为（根据我）的原因。

请看看这个小提琴：http: //jsfiddle.net/2yaRU/

<div > //float left
  Sometext <span> text<.span>//float:right
<div>

尽管我的行中有很多可用宽度，但右侧的浮动文本移动到下一行。理想情况下，根据我的说法，文本应与 float:left 并排显示在左侧，float:right 在 div 内的右侧。

这不可能是一个复杂的问题，所以我在这里没有很常见的东西吗？

score 1 · Accepted Answer

首先放置浮动项目。浮动嵌套在彼此内部，因此它们不会相互影响。浮动元素会自动改变它 display:block;

score 0 · Accepted Answer

我认为有几件事正在发生。由于 wrap 是float:left，它切换到块格式化上下文。看起来问题是文本之后的空格（就在嵌套浮点之前）被认为是尾随，因为在它之后的流中没有任何内容。因此，父级的宽度没有考虑空间，即使在呈现布局时它确实占用了空间，正如您在 html 中看到的那样。

删除尾随空格会使 X 回到与文本相同的行。

 如果你想在文本后面加一个空格，你应该在 html 中添加一个不间断的空格 ( )。

2 回答 2