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>