在HTML中包裝一個元素與另一個元素

<div> 
<span>oneoneoneone</span> 
<span>twooneoneone</span> 
<span>threeoneoneone</span> 
</div>

本質上，它在一行中顯示「span」而不中斷。在HTML中包裝一個元素與另一個元素

<div style="position:absolute;background:red"> 
<div style="position:absolute"> 
<span>oneoneoneone</span> 
<span>twooneoneone</span> 
<span>threeoneoneone</span> 
</div> 
</div>

它顯示一個在另一個之下的跨度元素。我知道這是一個愚蠢的問題，但我很想知道這個事實！我的問題是，爲什麼內聯元素在這裏像塊級元素一樣行爲？來自stackoverflow的任何好人...

來源

2013-12-11 rosemary

我已經editted我的問題。爲什麼內聯元素在這裏像塊級元素一樣行爲？ – rosemary

span元素是內聯元素，這意味着它們將始終佔用線條上的空間，然後封裝到下一行。

在第一個例子中，你有一個正常的div這是一個塊級元素，將佔用整條線（100％寬度）。這意味着跨度不會被包裹，除非寬度小於全部三個單詞。

在第二個例子中，你有一個絕對定位的div。由於你沒有給出這個寬度，所以它將和它內部最大的非分離元素一樣寬 - 這是你的跨度中的單詞之一。由於div現在只有一個字寬，跨度將包裝。

This fiddle shows your second absolutely positioned div is only as wide as the largest non-breaking element

Have a look at this to understand block and inline elements

來源

2013-12-11 10:41:53 Pete

哇！什麼答案......... thanxxx – rosemary

我仍然困惑！當我嘗試將（1）外部div的位置更改爲相對內部div，將絕對（2）外部div更改爲絕對內部div，將相對（3）更改爲僅具有絕對位置的單個div。在所有情況下，span元素都只顯示一行而沒有換行符。爲什麼是這樣？ @Pete – rosemary

所有的元素仍然在一行中，因爲你沒有給你的絕對div一個寬度 - 你需要給絕對div的寬度大於所有單詞的長度，如果你想要他們t留在同一行 – Pete

因爲默認情況下a是一個塊元素，它佔用了它所在容器的全部寬度。「position：absolute」移除該寬度。如果您設置「寬度：100％」;對於具有絕對定位的元素，跨度將再次在一條線上不中斷。

來源

2013-12-11 10:41:34

謝謝，這裏是我的投票.. – rosemary

我仍然困惑！當我嘗試將（1）外部div的位置更改爲相對內部div，將絕對（2）外部div更改爲絕對內部div，將相對（3）更改爲僅具有絕對位置的單個div。在所有情況下，span元素都只顯示一行而沒有換行符。爲什麼是這樣？ @Dan Goodspeed – rosemary

你能提供一個你的意思嗎？ –

在HTML中包裝一個元素與另一個元素

回答

相關問題