具有更多文本的元素會壓下其他內嵌塊元素。爲什麼？

這非常簡單，我完全被這種行爲困惑。我希望我的搜索結果能夠以連續2個塊的精美網格顯示。但相反，它表現出歪曲的地方與更多的文本的div推其他人的內容。我怎樣才能解決這個問題？具有更多文本的元素會壓下其他內嵌塊元素。爲什麼？

這裏有一個簡單的例子，顯示在FF和Chrome的問題：

<html> 
<body> 
    <style> 
    .search_result 
    { 
     border: thin solid; 
     width: 250px; 
     height:200px; 
     display: inline-block; 
    } 
    </style> 
    <div style='width:508px'> 
     <div class='search_result'> 
      Meerkats demonstrate altruistic behavior within their colonies; one or more meerkats stand sentry while others are foraging or playing, to warn them of approaching dangers ... 
     </div> 
     <div class='search_result'> 
      one or more meerkats stand sentry 
     </div> 
     <div class='search_result'> 
      meerkats 
     </div> 
    </div> 
</body> 
</html>

來源

2011-02-18 Bijou Trouvaille

在.search_result，加vertical-align: top。

Live Demo

來源

2011-02-18 16:01:03 thirtydot

太棒了！謝謝！ – 2011-02-18 16:09:44

具有更多文本的元素會壓下其他內嵌塊元素。爲什麼？

回答

相關問題