html – 具有更多文本的元素会向下推送其他内联块元素.为什么?

前端之家收集整理的这篇文章主要介绍了html – 具有更多文本的元素会向下推送其他内联块元素.为什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这非常简单,我对这种行为感到困惑.我希望我的搜索结果显示在一个连续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>

解决方法

在.search_result上,添加vertical-align:top.

Live Demo

原文链接:https://www.f2er.com/html/231543.html

猜你在找的HTML相关文章