多元素浮动高度不一致导致的参差不齐问题解决方案

最新推荐文章于 2024-05-09 09:00:00 发布

daruanzai3165

最新推荐文章于 2024-05-09 09:00:00 发布

阅读量708

点赞数

原文链接：http://www.cnblogs.com/hcxy/p/6906579.html

版权

如上图，是项目中经常会碰到的情况，采用浮动布局，因为文本内容是不可控制的所以导致外层元素（蓝色）高度不一致，结果第三个元素没有如希望的那样出现在第一个元素下面，最终出现这种参差不齐的效果界面。

以上问题的解决办法，可以给文本固定高度，超出出现省略号，或者还可以使用js计算三个外层容器高度并取最大值重新赋值给这三个元素。

下面介绍另一个方法：使用inline-block

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .outer {
            font-size: 0;
            width: 800px;
            margin: 100px auto;
            border: 5px solid red;
        }
        .outer div {
            font-size: 16px;
            width: 48%;
            padding: 1%;
            display: inline-block;
            *display:inline;
            *zoom:1;
            margin: 0;
            vertical-align: top; 
　　　　　　　outline: 1px solid #666;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div>【杰克·斯派洛】几经辗转最终成为黑珍珠号的船长，有着独特的魅力和时而幽默时而认真的性格。亦正亦邪，不讲究个人卫生。有人认为他是最伟大的海盗，也有人认为他是最奸恶的海盗。史派罗最爱的黑珍珠号被封印在玻璃瓶里，自己也一直霉运缠身。然而他还要面对更可怕的考验：亡灵死敌萨拉查船长要追杀他，他必须用尽各种计谋保住自己的命。</div>
        <div>【萨拉查船长】人称“海上屠夫”，是令人畏惧的“沉默玛丽号”船长。一直想干掉杰克船长，在得知三叉戟能够消灭杰克之后，不远万里和风险要弄到三叉戟，势必要为兄弟报仇雪恨！他带领着可怕的亡灵船员毫不留情地清理加勒比海域的海盗。他总是留下一个活口，将可怕的传说传播出去。</div>
        <div>【卡瑞娜·史密斯】天文学家，卡琳娜聪慧而坚毅，年纪轻轻便精通数学和天文学，更有与其学识和品质相匹配的美貌。她的武器不是刀剑，而是一本伽利略的日记，是她未曾谋面的父亲留给她的。这本日记上有关于星星的记载，将带领她找到最大的宝藏——拥有该宝藏，就拥有控制整个海洋的力量。</div>
        <div>【赫克托·巴博萨】与杰克是死敌，原先是他的大副，后背叛了他。在外也鼎鼎有名，在第四部中，击败了臭名昭著的海盗黑胡子，并且统治了他的船：安妮女王复仇号。和杰克有和好的趋势。巴波萨十分精明，擅长以小博大，是交易高手，同时也是击剑高手。现在他与十分危险的一方结盟，共同出发寻找海神的三叉戟。</div>
    </div>
</body>
</html>

效果图：

注意看，第二个容器相对而言高度较小，但第三四个都正常显示。

这里有几个关键点。①. 最外层容器font-size设置为0，目的是去除inline-block元素间默认间距；②. 内层元素设置display：inline-block，同时重置font-size，并且设置vertical-align:top向上对齐；③. 还可以加上对IE6/7的兼容： “ *display:inline;*zoom:1;”。

转载于:https://www.cnblogs.com/hcxy/p/6906579.html

daruanzai3165

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多元素浮动高度不一致导致的参差不齐问题解决方案

如上图，是项目中经常会碰到的情况，采用浮动布局，因为文本内容是不可控制的所以导致外层元素（蓝色）高度不一致，结果第三个元素没有如希望的那样出现在第一个元素下面，最终出现这种参差不齐的效果界面。以上问题的解决办法，可以给文本固定高度，超出出现省略号，或者还可以使用js计算三个外层容器高度并取最大值重新赋值给这三个元素。下面介绍另一个方法：使用inline-block&...
复制链接

扫一扫