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

最新推荐文章于 2021-06-29 18:13:15 发布

秃头的甜甜圈

最新推荐文章于 2021-06-29 18:13:15 发布

阅读量112

点赞数

分类专栏：多栏布局

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

版权

多栏布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

等高布局之真等高

原理：利用内容撑开父元素的特点，即父盒子的高度取决于内容里最高盒子的高度
步骤：（假设有三列盒子）
1.浮动并排清除浮动属性，给每个列盒子设置不同的背景色
2.给盒子在套几个盒子，其数量等于列的数量，每一列都要分配一个背景盒子，给每个背景盒子设置不同的背景色。
3.先移动倒数第二层的盒子（用来放置第三个列盒子），然后依次移动倒数第三层（最里边那个，用来放置第二个列盒子）…设置负左外边距移动，margin-left:-40%; 移动的距离是放置那个列盒子的宽度。
4.移动相应的列盒子到相应的背景盒子，通过相对定位左正值 position: relative;
left: 70%; 移动的距离是前几列盒子的宽度之和，每个列盒子移动的距离相等。
第一个移动的是第三列，向右移动的是第二列加第三列的宽度之和
5.给最外侧的盒子添加一个overflow:hidden属性，取消列盒子的背景色。
每一个背景盒子都要设置一样的宽度
**优点：**兼容各种浏览器，方便扩展容易创建任意列数
**缺点：**结构嵌套复杂，理解会带来一定难度

<!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;
    }
    .first{
        float: left;
        width:30%;
        height: 200px;
        font-size: 20px;
        line-height: 200px;
        text-align: center;
        /* background-color: palevioletred; */
        position: relative;
       left: 70%;
    }
    .second{
        float: left;
        width: 30%;
        height: 300px;
        /* background-color: plum; */
        font-size: 20px;
        line-height: 300px;
        text-align: center;
        position: relative;
       left: 70%;
    }
    .last{
        float: left;
        width: 40%;
        height: 400px;
        /* background-color: orange; */
        font-size: 20px;
        line-height: 400px;
        text-align: center;
        position: relative;
        left: 70%;
    }
    .box1{
        width: 100%;
        margin-left: -30%;
        background-color: chocolate;
    }
    .box2{
        width: 100%;
        background-color: yellow;
        margin-left:-40%;
    }
    .box3{
        width: 100%;
        background-color: aqua;
      overflow: hidden;
    }
    .clearFix::after{
        clear: both;
        display: block;
        content: '';
    }
    </style>
</head>
<body>
    <div class="box3 clearFix">
            <div class="box2 clearFix">
                    <div class="box1 clearFix">
                            <div class="first">11</div>
                            <div class="second">22</div>
                            <div class="last">33</div>
                        </div>
            </div>
    </div>
    
    
</body>
</html>

最初：

在这里插入图片描述
实现真等高：