首页 > 其他分享> 文章详细

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

2020-11-27 13:32:13 阅读：198 来源： 互联网

标签：多栏盒子 margin 布局宽度三栏左侧右侧 left

一、多栏布局方案

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9