3种方法多列等高布局思路--小技巧 

    （1）利用内外间距相抵消，为父元素设置overflow:hidden;实现
        每一列使用padding值撑开背景色；并且每一列使用padding撑开的多余的占位让margin负值抵消；
        父级盒设置溢出隐藏
        优点：结构简单，兼容所有浏览器
        缺点：伪等高，需要合理控制margin和padding值
    
    （2）利用内容撑开父元素的特点，为每一列添加对应的容器，进行相互嵌套，并在每个容器中添加背景颜色
        三个嵌套的div负责背景，三列放在最内侧的div盒子中；
        通过相对定位，分配三列的背景的位置；
        通过margin负值，将内容移到对应的背景的位置；
        父元素设置溢出隐藏
        优缺点：扩展性好，可以实现自适应，结构嵌套复杂
    
    （3）利用边框模拟背景，实现等高的显示效果
        左、右边框颜色、内容背景分别负责三列的背景颜色；
        通过margin值，同步列的位置
        特点：扩展性差，三列+的布局不适用

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等高布局</title>
    <style>
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .clearfix{
            *zoom: 1;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
 
        .wrap1{
            width: 1000px;
            margin: 0 auto;
            overflow: hidden;
        }
        .wrap1>div{
            min-height: 200px;
        }
        .wrap1 .left{
            width: 200px;
            background: yellow;
 
            padding-bottom: 1000000px;
            margin-bottom: -1000000px;
        }
        .wrap1 .center{
            width: 600px;
            background: yellowgreen;
 
            padding-bottom: 1000000px;
            margin-bottom: -1000000px;
        }
        .wrap1 .right{
            width: 200px;
            background: lightgreen;
 
            padding-bottom: 1000000px;
            margin-bottom: -1000000px;
        }
 
        .wrap2{
            width: 1000px;
            margin: 0 auto;
 
            overflow: hidden;
        }
        .wrap2 .col1{
            width: 100%;
            background: lightblue;
         }
         .wrap2 .col2{
             width: 100%;
             background: #0674a0;
 
             position: relative;
             left: 200px;
         }
         .wrap2 .col3{
             width: 100%;
             background:rgb(108, 172, 224);
 
             position: relative;
             left: 500px;
         }
         .wrap2 .col3>div{
             min-height: 200px;
         }
         .wrap2 .col3 .left{
             width: 200px;
 
             margin-left: -700px;
         }
         .wrap2 .col3 .center{
             width: 500px;
 
             margin-left: -500px;
         }
         .wrap2 .col3 .right{
             width: 300px;
         }
         .wrap3{
            /* width: 1000px;
            margin: 0 auto; */
 
            overflow: hidden;
        }
        .wrap3 .col1{
            width: 100%;
            background: lightcoral;
         }
         .wrap3 .col2{
             width: 100%;
             background: #f34121;
 
             position: relative;
             left: 20%;
         }
         .wrap3 .col3{
             width: 100%;
             background:rgb(224, 174, 108);
 
             position: relative;
             left: 50%;
         }
         .wrap3 .col3>div{
             min-height: 200px;
         }
         .wrap3 .col3 .left{
             width: 20%;
 
             margin-left: -70%;
         }
         .wrap3 .col3 .center{
             width: 50%;
 
             margin-left: -50%;
         }
         .wrap3 .col3 .right{
             width: 30%;
         }
 
         .wrap4{
             width: 500px;
             background: yellow;
             border-left: 200px solid pink;
             border-right: 300px solid tomato;
             margin: 0 auto;
         }
         .wrap4>div{
             min-height: 200px;
         }
         .wrap4 .left{
             width: 200px;
 
             margin-left: -200px;
         }
         .wrap4 .center{
             width: 500px;
         }
         .wrap4 .right{
             width: 300px;
             margin-right: -300px;
         }
    </style>
</head>
<body>
    <!-- 利用内外间距相抵消，为父元素设置overflow:hidden;实现 -->
    <div class="wrap1 clearfix">
        <div class="left fl">左侧</div>
        <div class="center fl">中间内容-利用内外间距相抵消</div>
        <div class="right fl">右侧</div>
    </div>
    <!-- 利用内容撑开父元素的特点，为每一列添加对应的容器，进行相互嵌套，并在每个容器中添加背景颜色： -->
    <div class="wrap2">
        <div class="col1">
            <div class="col2">
                <div class="col3 clearfix">
                    <div class="left fl">左侧</div>
                    <div class="center fl">中间内容-利用内容撑开父元素的特点</div>
                    <div class="right fl">右侧</div>
                </div>
            </div>
        </div>
    </div>
<!-- 改写自适应：使用百分比 -->
    <div class="wrap3">
        <div class="col1">
            <div class="col2">
                <div class="col3 clearfix">
                    <div class="left fl">左侧</div>
                    <div class="center fl">中间内容-使用百分比-方法同第二种</div>
                    <div class="right fl">右侧</div>
                </div>
            </div>
        </div>
    </div>
 
    <!-- 利用边框模拟背景，实现等高的显示效果 -->
    <div class="wrap4 clearfix">
        <div class="left fl">左侧</div>
        <div class="center fl">中间内容-利用边框模拟背景</div>
        <div class="right fl">右侧</div>
    </div>
</body>
</html>

 

 

posted @ 2020-02-19 20:50  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源