2012-12-11 118 views
0

由於HTML標記的以下兩大塊:爲什麼內聯div的行爲與跨度不同?

<div style="overflow:auto; line-height:22px;"> 
    <div style="float:left; display:inline;">Write</div> 
    <div style="float:left; display:inline; font-size:20px;">on the</div> 
    <div style="float:left; display:inline; font-size:20px;">same line</div> 
</div> 

<div style="line-height:22px;"> 
    <span>Write</span> 
    <span style="font-size:20px;">on the</span> 
    <span style="font-size:20px;">same line</span> 
</div> 

爲什麼他們不同的方式顯示同樣的事情? span是一個內聯元素,但文本「Write」與「on」和「same line」垂直對齊,不管div如何顯示爲inline。它不應該以完全相同的方式渲染該行嗎?

回答

5

您的div浮動。如果他們漂浮,他們不能內聯。

如果去掉浮(以及隨後的父母,因爲這不會是必要的overflow: auto),那麼他們就會表現得像內聯元素:

<div style="line-height:22px;"> 
    <div style="display:inline;">Write</div> 
    <div style="display:inline; font-size:20px;">on the</div> 
    <div style="display:inline; font-size:20px;">same line</div> 
</div> 
+0

謝謝。你會說最好通過將div元素顯示爲內聯/ -block而不是使用float來排列div元素嗎? – TheBoss

+0

這取決於用例,因爲每個用戶的表現都截然不同。 – BoltClock

相關問題