首页 > 其他分享> > 九、多栏布局方案、三栏自适应布局、等高布局1

九、多栏布局方案、三栏自适应布局、等高布局1

2020-11-27 13:32:13 作者：互联网

一、多栏布局方案

pc端多栏布局：宽度自适应布局

1、两栏自适应布局

两栏自适应布局分为：

左侧宽度固定，右侧宽度自适应
右侧宽度固定，左侧宽度自适应

左侧宽度固定，右侧宽度自适应为例，技术原理如下：

左侧盒子设置固定的宽度（绝对单位），右侧盒子设置宽度100%；
左侧盒子设置绝对定位
给右侧盒子添加一个子盒，并且子盒设置padding-left:左侧盒子的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* - 左侧盒子设置固定的宽度（绝对单位），右侧盒子设置宽度100%；
            - 左侧盒子设置绝对定位
            - 给右侧盒子添加一个子盒，并且子盒设置padding-left:左侧盒子的宽度 
        */
        .left {
            position: absolute;
            width: 300px;
            min-height: 200px;
            background: aqua;
        }
        .right {
            width: 100%;
            min-height: 200px;
            background-color: pink;
        }
        .right>.son {
            padding-left: 300px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">左侧盒子中的内容</div>
        <div class="right">
            <div class="son">右侧盒子中的内容</div>
        </div>
    </div>
</body>
</html>

2、三栏自适应布局

左侧盒子和右侧盒子固定宽度，让中间盒子宽度自适应

（1）圣杯布局

技术原理

结构上先放中间盒子，再放左盒和右盒
左侧盒子和右侧盒子给定固定宽度（px），中间盒子设置width:100%;
给左侧、右侧、中间三个盒子设置浮动（注意给父元素清浮动）
将左侧盒子拉到父元素的最左边（margin-left：-100%），将右侧盒子拉到父元素的最右边（margin-left:-右侧盒子的宽度）
将中间盒子的内容露出来(给三个盒子的父盒设置padding：0 右侧盒子的宽度 0 左侧盒子的宽度)
将左侧归位（微调元素位置，相对定位，left:-左侧盒子宽度）、右侧盒子归位（微调元素位置，相对定位，right:-右侧盒子宽度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            - 结构上先放中间盒子，再放左盒和右盒
            - 左侧盒子和右侧盒子给定固定宽度（px），中间盒子设置`width:100%`;

            - 给左侧、右侧、中间三个盒子设置浮动（注意给父元素清浮动）
            - 将左侧盒子拉到父元素的最左边，将右侧盒子拉到父元素的最右边
            - 将中间盒子的内容露出来(给三个盒子的父盒设置padding：0 右侧盒子的宽度 0 左侧盒子的宽度)
            - 将左侧归位（微调元素位置，相对定位，left:-自身宽度）、右侧盒子归位（微调元素位置，相对定位，right:-自身宽度）
         */
        .wrap {
            padding: 0 200px 0 300px;
        }
         .left {
             position: relative;
             left: -300px;
             float: left;
             width: 300px;
             min-height: 300px;
             background-color: aqua;
             margin-left: -100%;
         }
         .right {
             position: relative;
             right: -200px;
             float: left;
             width: 200px;
             min-height: 300px;
             background-color: pink;
             margin-left: -200px;
         }
         .center {
             float: left;
             width: 100%;
             min-height: 300px;
             background: yellow;

         }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="center">中间盒子的内容</div>
        <div class="left">左侧盒子的内容</div>
        <div class="right">右侧盒子的内容</div>
    </div>
</body>
</html>

（2）双飞翼布局

始于淘宝UED团队

技术原理：

结构上先放中间盒子（中间盒子需要有子盒），再放左侧和右侧盒子
左侧盒子和右侧盒子给定固定宽度（px），中间盒子设置width:100%;
给左侧、右侧、中间三个盒子设置浮动（注意给父元素清浮动）
将左侧盒子拉到父元素的最左边（margin-left：-100%），将右侧盒子拉到父元素的最右边（margin-left:-右侧盒子的宽度）
将中间盒子露出来（给中间盒子的子盒设置margin：0 右侧盒子的宽度 0 左侧盒子的宽度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            - 结构上先放中间盒子（中间盒子需要有子盒），再放左侧和右侧盒子
            - 左侧盒子和右侧盒子给定固定宽度（px），中间盒子设置`width:100%`;

            - 给左侧、右侧、中间三个盒子设置浮动（注意给父元素清浮动）
            - 将左侧盒子拉到父元素的最左边（margin-left：-100%），将右侧盒子拉到父元素的最右边（margin-left:-右侧盒子的宽度）
            - 将中间盒子露出来（给中间盒子的子盒设置margin：0 右侧盒子的宽度 0 左侧盒子的宽度）
         */
         .clearfix::after {
             content: "";
             display: block;
             clear: both;
         }
         .clearfix {
             *zoom: 1;
         }
         .left {
             float: left;
             width: 200px;
             min-height: 200px;
             background-color: aqua;
             margin-left: -100%;
         }
         .right {
             float: left;
             width: 300px;
             min-height: 200px;
             background-color: blueviolet;
             margin-left: -300px;
         }
         .center {
             float: left;
             width: 100%;
             min-height: 200px;
             background: burlywood;
         }
         .son {
             margin: 0 300px 0 200px;
         }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div class="center">
            <div class="son">中间盒子的内容</div>
        </div>
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

3、等高布局

等高：如果一列的高度变化，其他列的高度也需要跟着变化

（1）内外间距相抵消实现等高

关键点：

给每一列设置padding-bottom：9999px,同时设置margin-bottom：-9999px
给父元素溢出隐藏（overflow:hidden）

优缺点:

优点：
- 代码简单，易于理解
- 兼容所有浏览器
缺点：
- 实现的是伪等高，需要合理的控制内外间距的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::after {
             content: "";
             display: block;
             clear: both;
         }
         .clearfix {
             *zoom: 1;
         }
        .wrap {
            width: 1000px;
            /* overflow: hidden; */
        }
        .wrap div {
            float: left;
            min-height: 200px;
        }
        .left {
            width: 200px;
            background-color: lawngreen;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .center {
            width: 500px;
            background-color: lightblue;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .right {
            width: 300px;
            background-color: lightpink;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div class="left">左盒</div>
        <div class="center">中间盒子</div>
        <div class="right">右盒</div>
    </div>
</body>
</html>

标签：多栏,盒子,margin,布局,宽度,三栏,左侧,右侧,left
来源： https://blog.csdn.net/qq_52426181/article/details/110228657