Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
643 views
in Technique[技术] by (71.8m points)

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

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?

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

On .search_result, add vertical-align: top.

Live Demo


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...