浮动跨度为什么会下降?

时间:2022-09-30 08:45:02

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


5  

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


1  

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

所以,当左浮动

A

一个

B

B

C

C

will float to ABC -

会浮到ABC吗?

A

一个

AB

AB

ABC

美国广播公司

when all floated right will give you CBA, as in

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

A

一个

BA

英航

CBA

CBA

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

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

#3


1  

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


1  

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


1  

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


5  

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


1  

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

所以,当左浮动

A

一个

B

B

C

C

will float to ABC -

会浮到ABC吗?

A

一个

AB

AB

ABC

美国广播公司

when all floated right will give you CBA, as in

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

A

一个

BA

英航

CBA

CBA

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

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

#3


1  

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


1  

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


1  

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>