事業部被放錯位置上插入文本和文本熄滅的div

Question

這是問題的的jsfiddle，http://jsfiddle.net/B77G2/2/

的問題是，當我把文本在一個div，股利（股利向下移動與jsfiddle中的家庭標識符中包含文本，您可以刪除t ## e文本以查看其正常工作）。如果div中沒有​​文本，則看起來很好，並且與其他div一致。

即使我正在使用自動換行功能，文本也不會出現在div中。

爲什麼會發生這種情況，我該如何解決？

在jsfiddle中顯示的所有東西都被縮小了，我希望我的問題很明顯。

這裏的HTML

<div id="container"> 
     <div class="fade" id="fade1" onclick="slide('prev')"><</div> 
     <div class="fade" id="fade2" onclick="slide('next')">></div> 

     <div id="sliding-container"> 
      <div class="slide leftmost" id="followme"> 
      </div> 

      <div class="slide left" id="projects"> 

      </div> 

      <div class="slide current" id="home"> 
       <p>Y u do dis :(fjsdahkfjdhsjfhdkjfsdjhfjsk djskfhdjfurt</p> // <---- the div thats being shown in the middle 
      </div> 

      <div class="slide right" id="knowledge"> 

      </div> 

      <div class="slide rightmost" id="contact"> 

      </div> 
     </div> 

    </div> 

Answer 1

似乎是一個vertical-align問題。嘗試顯式地設置：

.slide { vertical-align:top; } 

Fiddle

瀏覽器有一個稍微複雜的算法，用於計算的vertical-align的baseline（默認值），用於浮動的元素或與inline-block顯示。給它一個明確的值top通常可以解決這個問題。

---

哦，我幾乎忘了補充爲什麼線沒有打破。這很簡單：您的white-space:nowrap被繼承到後代元素，並且強制文本排成一行。所有你需要做的就是達到需要word-wrap文本內容之前重置，所以：

.slide { white-space: normal; word-wrap: break-word; } 

Fiddle

---

對於vertical-align解釋，這是一個有點複雜，這裏是spec爲默認值vertical-align值 - baseline：

對齊元素的「字母」基線與父元素的「字母」基線相關聯。如果內聯元素沒有「字母」基線，請將該框的底部（包括替換元素的邊距）與父級的「字母」基線對齊。如果沒有父項，或者如果在此元素與其父項之間存在流向方向更改，則主導基線設置爲「字母」，否則將設置爲「不更改」。

更好的解釋一個例子。打開這個fiddle。我在代表父母的字母baseline的幻燈片之間添加了一些文字。該baseline是這個圖像中的紅線：

正如你可以看到，當孩子有一個字母的基線，雙方父母和孩子字母基線按照規範的第一線對齊「將元素的「字母」基線與父元素的「字母」基線對齊。「

其他同級幻燈片沒有任何非空白/空白的TextNode，因此它們沒有與字符對齊的基線，並且規範的第二個語句會啓用：」如果內聯元素doesn '沒有'字母'的基線，對齊框的底部，包括其邊緣與父母的'字母'基線。「