多栏布局解决方案之伪等高

最新推荐文章于 2020-05-26 16:32:45 发布

秃头的甜甜圈

最新推荐文章于 2020-05-26 16:32:45 发布

阅读量150

点赞数

分类专栏：多栏布局文章标签：等高布局之伪等高

本文链接：https://blog.csdn.net/personaas/article/details/98508974

版权

多栏布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

等高布局之伪等高

等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。
实现要点：
（1）多个列需要单独设置自己的背景色。
（2）一列变高，其他列等高变化

表格实现行等高、列等宽（等高的简便方法不是假等高）
伪等高：内外边距相消法（父盒子的高度取决于子盒子里最高盒子的高度）
步骤：

给几列盒子设置很大的正padding-bottom
再给几列盒子设置很大的负 margin-bottom
最外侧的盒子设置 overflow: hidden
（如果最外侧的盒子要实现完全由内容撑开的话，要设置这两个值相等 ,因为盒模型的高度H=内容height+padding-top+padding-bottom+margin-top+margin-bottom+border-top+border-bottom.本例子就是 .box盒子完全由内容盒子撑开，不相等也可以实现假等高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        /* box-sizing: border-box; */
    }
    .box{
        overflow: hidden;
        margin-left: 100px;
    }
    .box1{
        float: left;
        width: 300px;
        height: 200px;
        background-color: pink;
        padding-bottom: 999px;
        margin-bottom: -999px;
    }
    .box2{
        float: left;
        width: 300px;
        height: 300px;
        background-color: yellow;
        padding-bottom: 999px;
        margin-bottom: -999px;
    }
    </style>
</head>
<body>
    <div class="box">
    <div class="box1">易烊千玺，2000年11月28日生于湖南怀化，中国内地男歌手、舞者、演员</div>
    <div class="box2">易烊千玺，2000年11月28日生于湖南怀化，中国内地男歌手、舞者、演员</div>
</div>
</body>
</html>

最初：
在这里插入图片描述
实现伪等高之后：

秃头的甜甜圈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多栏布局解决方案之伪等高

等高布局之伪等高等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。实现要点：（1）多个列需要单独设置自己的背景色。（2）一列变高，其他列等高变化表格实现行等高、列等宽伪等高：内外边距相消法（父盒子的高度取决于子盒子里最高盒子的高度）步骤：给几列盒子设置很大的正padding-bottom再给几列盒子设置很大的负 margin-bottom最外侧的盒子设...
复制链接

扫一扫

专栏目录