浮动跨度为什么会下降?

This code will work fine in Webkit (chrome) but not in firefox, where the second span will drop, do you know why?

这段代码在Webkit (chrome)中运行得很好，但在firefox中就不行了，第二个span将会下降，你知道为什么吗?

<div id="sbar">
    <span id="status">Some Text</span>
    <span id="mlog" style="float: right;">Some text in the right</span>
</div>

5 个解决方案

#1

Try reversing the two spans.

试着扭转这两个跨度。

<div id="sbar">
    <span id="mlog" style="float: right;">Some text in the right</span>
    <span id="status">Some Text</span>
</div>

#2

Yeah... reversing makes it work cause with floats, you need to arrange your elements like a stack that the browser can pick up -

是的…换行使它在浮点数上工作，你需要把你的元素像一个栈一样排列，浏览器可以拾取

so when floating left

所以,当左浮动

一个

will float to ABC -

会浮到ABC吗?

一个

ABC

美国广播公司

when all floated right will give you CBA, as in

当所有的浮动权都会给你CBA，就像。

一个

英航

CBA

I've seen this implemented in firefox, haven't checked webkit. You can be safe with this, though.

我见过在firefox中实现的，还没有检查webkit。不过，这样做是安全的。

#3

This code will work fine in Webkit (chrome) but not in firefox

这段代码在Webkit (chrome)中运行良好，但在firefox中却不行

WebKit is wrong. The standard specifies the right-float must go down a line.

WebKit是错误的。标准指定右浮动必须沿直线。

For explanation, see CSS: Three Column Layout problem.

有关说明，请参见CSS:三列布局问题。

#4

This code will work fine in Webkit (chrome) but not in firefox, where the second span will drop, do you know why?

这段代码在Webkit (chrome)中运行得很好，但在firefox中就不行了，第二个span将会下降，你知道为什么吗?

Yes. The behavior of a floated element will fall below a non-floated element that comes before it in the code. Others have given you the fixes already.

是的。浮动元素的行为将落在代码中它之前的非浮动元素之下。其他人已经给了你补丁。

#5

Can propose other solution without reversing. It does work in different browsers

可以提出其他解决方案而不倒车。它可以在不同的浏览器中工作

<div id="sbar" style="position:relative;">
    <span id="status">Some Text</span>
    <span id="mlog" style="position:absolute; top:0;right:0;">Some text in the right</span>
</div>

#1