Web前端学习—基础篇(30)_多列布局：实现自适应布局、圣杯布局、双飞翼、等高布局的方法

4.25、多列布局

自适应
解决不同设备提供不同版本的页面问题
自适应布局
屏幕分辩率发生变化时，页面中的元素的位置会变化而大小不变

4.25.1、两列自适应布局——左侧宽度固定，右侧宽度自适应

1）左右两个盒子，左侧盒子宽度固定，右侧盒子宽度设置为100%
2）左侧盒子设置绝对定位position:absolute;
3）在右侧盒子中添加子盒，为子盒设置padding-left属性值，值为左侧盒子的宽度

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应两列布局</title>
    <style>
        .left{
            width: 100%;
            min-height: 300px;
            background:lightblue;
            /* float: left; */
        }
        .right{
            width: 400px;
            min-height: 300px;
            position: absolute;
            top: 8px;
            right: 0;
            background: orange;
            float: right;
        }
        .left .sub{
            padding-right: 400px;
        }
    </style>
</head>
<body>
    <div class="right">
    </div>
    <div class="left">
        <div class="sub">
            hello world
        </div>
    </div>
   
</body>
</html>

结果

4.25.2、圣杯布局

左右两侧宽度固定，中间部分自适应的三列布局

1）HTML结构中，先主体内容后侧边
2）两侧宽度固定，中间宽度设置100%
3）两侧盒子和中间盒分别加浮动(float:left;)
4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到最右边（margin-left: -右侧盒子的宽度）
5）通过左、中、右盒子的父级盒将中间内容露出来（在父级盒上设置padding: 0 右侧盒子的宽度 0 左侧盒子的宽度）
6）分别还原左侧盒子和右侧盒子（为左侧盒和右侧盒设置position: relative; 为左侧盒子设置left: -左侧盒宽度; 为右侧盒子设置right:- 右侧盒子宽度;）
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .center{
            width: 100%;
            min-height: 300px;
            background: red;
            float: left;
        }
        .left{
            width: 200px;
            min-height: 300px;
            float: left;
            background: blue;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            width: 300px;
            min-height: 300px;
            background: orange;
            float: left;
            margin-left: -300px;
            position: relative;
            right: -300px;
        }
        .wrap{
            padding: 0 300px 0 200px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="center">
            霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

结果：

4.25.3、双飞翼布局

1）HTML结构中，先主体结构（主体结构盒中包含主体内容盒）后侧边
2）两侧宽度固定，中间宽度设置100%
3）两侧盒子和中间盒分别加浮动（float:left;）
4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到最右边（margin-left: -右侧盒子的宽度）
5）在主体结构盒的子盒（主体内容盒）上设置margin值，将中间内容露出来（margin: 0 右侧盒子的宽度 0 左侧盒子的宽度）

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        .wrap::after{
            content: '';
            display: block;
            clear: both;
        }
        .center{
            width: 100%;
            float: left;
          
        }
        .centerCon{
            min-height: 300px;
            background: blue;
            margin: 0 300px 0 200px;
        }
        .left{
            width: 200px;
            min-height: 300px;
            background: red;
            float: left;
            margin-left: -100%;
        }
        .right{
            width: 300px;
            min-height: 300px;
            background: orange;
            float: left;
            margin-left: -300px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="center">
            <div class="centerCon">
                nihaonihaonihaonihaon
                ihaonihaonihaonihaoniha
                onihaonihaonihaonihaonih
                aonihaonihaonihaonihaoniha
                onihaonihaonihaonihaonihaonih
                aonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihaonihaonihaon
                ihaonihaonihaonihaonihaonihaonihaonihaonihao
                nihaonihaonihaonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihao
                nihaonihaonihaonihaon
                ihaonihaonihaonihaoniha nihaonihaonihaonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihao
                nihaonihaonihaonihaon
                ihaonihaonihaonihaoniha
                onihaonihaonihaonihaonih
                aonihaonihaonihaonihaoniha
                onihaonihaonihaonihaonihaonih
                aonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihaonihaonihaon
                ihaonihaonihaonihaoniha
                onihaonihaonihaonihaonih
                aonihaonihaonihaonihaoniha
                onihaonihaonihaonihaonihaonih
                aonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihaonihaonihaon
                onihaonihaonihaonihaonih
                aonihaonihaonihaonihaoniha
                onihaonihaonihaonihaonihaonih
                aonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihaonihaonihaon
                ihaonihaonihaonihaonihaonihaonihaonihaonihao
                nihaonihaonihaonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihao
                nihaonihaonihaonihaon
                ihaonihaonihaonihaonihanihaonihaonihaonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihao
                nihaonihaonihaonihaon
                ihaonihaonihaonihaoniha
                onihaonihaonihaonihaonih
                aonihaonihaonihaonihaoniha
                onihaonihaonihaonihaonihaonih
                aonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihaonihaonihaon
                ihaonihaonihaonihaoniha
                onihaonihaonihaonihaonih
                aonihaonihaonihaonihaoniha
                onihaonihaonihaonihaonihaonih
                aonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihaonihaonihaon
                onihaonihaonihaonihaonih
                aonihaonihaonihaonihaoniha
                onihaonihaonihaonihaonihaonih
                aonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihaonihaonihaon
                ihaonihaonihaonihaoniha
                onihaonihaonihaonihaonih
                aonihaonihaonihaonihaoniha
                onihaonihaonihaonihaonihaonih
                aonihaonihaonihaonihaonihaonihaoni
                haonihaonihaonihaonihaonihaonihaonihaonihaon
            </div>
        </div>
        <div class="left"></div>
        <div class="right">

        </div>
    </div>
</body>
</html>

4.25.4、等高布局

实现等高视觉效果

（1）利用内外间距相抵消，父元素设置overflow属性实现

每一列都需要使用paddng-bottom撑开背景颜色，将每一列用padding值撑开的多余的占位用margin负值抵消；父元素设置overflow:hidden;

优点：结构简单，兼容所有的浏览器
缺点：伪等高，扩展性较差，需要合理控制margin和padding值
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等高布局</title>
    <style>
        .wrap{
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
        }
        .wrap::after{
            content: '';
            display: block;
            clear: both;
        }
        .left{
            float: left;
            width: 300px;
            min-height: 300px;
            background: red;

            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }
        .center{
            float: left;
            width: 700px;
            min-height: 300px;
            background: lightcoral;
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }
        .right{
            float: left;
            width: 200px;
            min-height: 300px;
            background: orange;
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="center">  霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹霓虹</div>
        <div class="right"></div>
    </div>
</body>
</html>

（2）利用内容撑开父元素的特点，实现等高

实现
- 三个嵌套的div负责背景，三列放在最内部的div中
- 通过相对定位，分配三列背景的位置
- 通过margin负值，将内容移到对应的背景位置
- 父元素设置overflow:hidden;
特点
结构嵌套复杂，扩展性较好，可以实现自适应
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等高布局02</title>
    <style>
        .wrap{
            width: 100%;
            overflow: hidden;
        }
        .leftbg{
            width: 100%;
            min-height: 300px;
            background: orange;
        }
        .centerbg{
            width: 100%;
            min-height: 300px;
            background: orangered;
            position: relative;
            left: 200px;
        }
        .rightbg{
            width: 100%;
            min-height: 300px;
            background: lightcoral;
            position: relative;
            left: 700px;
        }
        .rightbg::after{
            content: '';
            display: block;
            clear: both;
        }
        .left{
            width: 20%;
            min-height: 300px;
            float: left;
            margin-left: -900px;
        }
        .center{
            width: 50%;
            min-height: 300px;
            float: left;
            margin-left: -700px;
        }
        .right{
            float: left;
            width: 30%;
            min-height: 300px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="leftbg">
            <div class="centerbg">
                <div class="rightbg">
                    <div class="left">
                        左侧布局
                    </div>
                    <div class="center">
                        中间布局
                    </div>
                    <div class="right">
                        右侧布局
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

posted @ 2021-03-27 21:32 泰初阅读(315) 评论(0) 编辑收藏举报

刷新页面返回顶部

靡不有初，鲜克有终

Web前端学习—基础篇(30)_多列布局：实现自适应布局、圣杯布局、双飞翼、等高布局的方法

4.25、多列布局

4.25.1、两列自适应布局——左侧宽度固定，右侧宽度自适应

4.25.2、圣杯布局

4.25.3、双飞翼布局

4.25.4、等高布局

（1）利用内外间距相抵消，父元素设置overflow属性实现

（2）利用内容撑开父元素的特点，实现等高

公告