具有更多文本的元素会下推其他内联块元素。为什么？答案

【问题标题】：An element with more text pushes down other inline-block elements. Why?具有更多文本的元素会下推其他内联块元素。为什么？
【发布时间】：2011-02-18 15:57:58
【问题描述】：

这非常简单，我对这种行为完全感到困惑。我希望我的搜索结果以连续 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>

【问题讨论】：

标签： html css

【解决方案1】：

在.search_result 上，添加vertical-align: top。

Live Demo

【讨论】：