等高布局

最新推荐文章于 2024-09-09 13:46:41 发布

yshusencsdn

最新推荐文章于 2024-09-09 13:46:41 发布

阅读量123

点赞数

文章标签： css 等高布局

本文链接：https://blog.csdn.net/yshusencsdn/article/details/98311630

版权

等高布局

伪等高(内外边距相消法)
真等高（背景盒子法）

伪等高(内外边距相消法)

<!DOCTYPE html>
<head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
        overflow: hidden;

    }
    .col1 {
        width: 30%;
        height: 400px;
        background-color: yellow;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col2 {
        width: 40%;
        height: 300px;
        background-color: red;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col3 {
        width: 30%;
        height: 500px;
        background-color: palegoldenrod;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    
    
    </style>
</head>
<body>
    <div class="c">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
    </div>
</body>
</html>

真等高（背景盒子法）

原理:

== 父盒子取决于内容盒子里最高的盒子的高度==

(1)多列浮动并排清除浮动影响

(2)给最外侧的盒子在套几个盒子套的盒子数量= 列的数量(每一列都要分配一个背景盒子)

(3)先移动倒数第2层的盒子然后依次移动倒数第3层…

设置负外边距移动

(4)移动相应的列到相应的背景盒子通过相对定位正值第一个移动的第3列向右移动的是第3列+第2列的宽度…

(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>
        * {
            padding: 0;
            margin: 0;
        }

        .a {
          

            width: 100%;
            
            background-color: purple;
            margin-left: -30%;
        }
        .b {
            width: 100%;
            background-color: yellow;
            margin-left: -30%;
        }
        .c {
            width: 100%;
            background-color: orange;
        }
      

        .col1 {
            width: 40%;
            height: 200px;
            /* background-color: red; */
            float: left;
            position: relative;
            left: 60%;
            

        }

        .col2 {
            width: 30%;
            height: 300px;
            /* background-color: yellow; */
            float: left;
            position: relative;
            left: 60%;

           
        }

        .col3 {
            width: 30%;
            height: 400px;
            /* background-color: blue; */
            float: left;
            position: relative;
            left: 60%;
          
            
        }
       
    </style>
</head>

<body>
    <div class="c">
        <div class="b">
            <div class="a">
                <div class="col1">第一列</div>
                <div class="col2">第2列</div>
                <div class="col3">第3列</div>
                <div style="clear:both"></div>
            </div>
        </div>
    </div>

</body>

</html>