开发者

An element with more text pushes down other inline-block elements. Why?

开发者 https://www.devze.com 2023-02-11 03:12 出处：网络

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 t

相关专题：css

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 i开发者_JAVA技巧t's content. How can I fix this?

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>

On .search_result, add vertical-align: top.

Live Demo