圣杯布局和双飞翼布局

最新推荐文章于 2022-08-16 19:48:13 发布

月下ctrlc

最新推荐文章于 2022-08-16 19:48:13 发布

阅读量164

点赞数

分类专栏：前端文章标签：定位 html css 前端

本文链接：https://blog.csdn.net/qq_44625142/article/details/108422318

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

布局

圣杯布局
双飞翼布局

圣杯布局

效果：两边定宽，中间自适应，且中间部分优先加载

实现思路

浮动成一行
利用margin负值，padding将左右部分移动到中间部分的两边
利用定位将左右部分移出去，不覆盖中间部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局，左右固定中间自适应</title>
    <style>
        .head,.footer {
            width: 100%;
            height: 100px;
            background-color: pink;
        }
        .content {
            padding: 0 200px;
        }
        .left,.right {
            float: left;
            width: 200px;
            height: 100px;
        }
        .center {
            float: left;
            background-color: red;
            width: 100%;
            height: 100px;
        }
        .left {
            background-color: plum;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            background-color: purple;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }

        .clearfix {
            zoom: 1;
        }
        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
    </style>
</head>
<body>
        <div class="head">头部</div>
        <div class="clearfix content">
            <div class="center">主区域</div>
            <div class="left">左区域</div>
            <div class="right">右区域</div>
        </div>
        <div class="footer">底部</div>
</body>
</html>

缺陷：中间部分的宽度必须大于左右两边，否则布局会错乱

双飞翼布局

针对圣杯布局的缺陷，双飞翼布局做了改变：
在center外面包裹一层容器后设置center的margin的值，将左右各收缩出左右部分的宽度，这样就不用使用定位将左右两部分移出去了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局，左右固定中间自适应</title>
    <style>
        .head,.footer {
            width: 100%;
            height: 100px;
            background-color: pink;
        }
        .content {
           float: left;
           width: 100%;
           background-color: red;
           height: 100px;
        }
        .left,.right {
            float: left;
            width: 200px;
            height: 100px;
        }
        .center {
           margin: 0 200px;
        }
        .left {
            background-color: plum;
            margin-left: -100%;
        }
        .right {
            background-color: purple;
            margin-left: -200px;
        }
        .footer {
            clear: both;
        }
    </style>
</head>
<body>
        <div class="head">头部</div>
        <div class="content">
            <div class="center">主区域</div>
        </div>
        <div class="left">左区域</div>
        <div class="right">右区域</div>
        <div class="footer">底部</div>
</body>
</html>

月下ctrlc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
圣杯布局和双飞翼布局

布局圣杯布局双飞翼布局圣杯布局效果：两边定宽，中间自适应，且中间部分优先加载实现思路浮动成一行利用margin负值，padding将左右部分移动到中间部分的两边利用定位将左右部分移出去，不覆盖中间部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
复制链接

扫一扫