具有更多文本的元素将其他inline-block元素向下推。为什么？ [英] An element with more text pushes down other inline-block elements. Why?
本文介绍了具有更多文本的元素将其他inline-block元素向下推。为什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是超级简单，我完全不理解这种行为。我想让我的搜索结果显示在一个漂亮的网格的块2连续。但相反，它显示了弯曲的地方与更多的文本推动其他人与它的内容。
This is super simple and I'm completely baffled by this behavior. I want my search results to display in a nice grid of blocks of 2 in a row. But instead it shows up crooked where the div with more text pushes others down with it's content. How can I fix this?
这是一个简单的例子，显示了FF和Chrome中的问题：
Here's a simplified example that shows the problem in FF and 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>
推荐答案
.search_result ，添加 vertical-align：top 。
这篇关于具有更多文本的元素将其他inline-block元素向下推。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
