likes
comments
collection
share

CSS的传统布局方式（三栏，圣杯，双飞翼）

作者站长头像
站长
· 阅读数 56

1.三栏布局

实现代码

    * {
        margin: 0;
        padding: 0;
    }
    .box1 {
        height: 200px;
    }

    .box1 .left,
    .box1 .right {
        position: absolute;
        top: 0px;
        background: red;
        height: 200px;
    }

    .box1 .left {
        left: 0;
        width: 200px;
    }

    .box1 .right {
        right: 0px;
        width: 200px;
    }

    .box1 .main {
        margin: 0 200px;  //因为left和right盒子是绝对定位不占有原来的位置,           
        height: 100%;     //所以main盒子要设置左右外边距是200px
        background: blue;
    }
</style>
<body>
    <div class="box1">
        <div class="left">左边</div>
        <div class="main">主体</div>
        <div class="right">右边</div>
    </div>
</body>

效果图

CSS的传统布局方式（三栏，圣杯，双飞翼）

2.圣杯布局

布局思路

  1. 首先设置三个浮动的盒子，代码如下：
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box2 .main {
        float: left;
        width: 100%;
        height: 400px;
        background-color: pink;
    }

    .box2 .left {
        float: left;
        width: 100px;
        height: 400px;
        background-color: red;
    }

    .box2 .right {
        float: left;
        width: 200px;
        height: 400px;
        background-color: blue;
    }
</style>

<body>
    <div class="box2">
        <div class="main">主体</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

效果图

CSS的传统布局方式（三栏，圣杯，双飞翼） 分析原因：left和right盒子现在在main盒子的下方，是因为main盒子的宽度设置的是页面宽度的100%，浮动的盒子左右排列不下，所以被main盒子挤到下方。 解决方法：让left盒子向左移动页面宽度100%的距离，再让right盒子向左移动本身宽度的距离。

  1. 解决后的代码
 .box2 .left {
        float: left;
        width: 100px;
        height: 400px;
        background-color: red;
        margin-left: -100%;     //让left盒子向左移动页面宽度100%的距离
    }

    .box2 .right {
        float: left;
        width: 200px;
        height: 400px;
        background-color: blue;
        margin-left: -200px;    //right盒子向左移动本身宽度的距离
    }

效果图

CSS的传统布局方式（三栏，圣杯，双飞翼） 产生的问题：main盒子的内容被left和right盒子遮挡。 解决方法：可以让父盒子box2设置左边距为left盒子的宽度，右边距为right盒子的宽度。不能直接main的外边距和内边距，因为main盒子的宽度为页面的100%，设置外边距无效果；若设置内边距会撑大盒子。

  1. 解决后的代码
 .box2 {
        margin-left: 100px;
        margin-right: 200px;
    }

效果图

CSS的传统布局方式（三栏，圣杯，双飞翼）

  1. 最后再让left盒子用绝对定位向左边移动left盒子宽度的距离，right盒子用绝对定位向右边移动right盒子宽度的距离，圣杯布局就完成了。
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box2 {
        margin-left: 100px;
        margin-right: 200px;
    }

    .box2 .main {
        float: left;
        width: 100%;
        height: 400px;
        background-color: pink;
    }

    .box2 .left {
        float: left;
        width: 100px;
        height: 400px;
        background-color: red;
        margin-left: -100%;
        position: relative;
        left: -100px;
    }

    .box2 .right {
        float: left;
        width: 200px;
        height: 400px;
        background-color: blue;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
</style>

<body>
    <div class="box2">
        <div class="main">
            <p>房价快速的回复大开杀戒恢复单身空间划分当升科技水电费第三方递四方速递第三方第三方房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技
            </p>
            <p>房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技</p>
            <p>房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技</p>
            <p>房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技</p>
            <p>房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技</p>
        </div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>

效果图

CSS的传统布局方式（三栏，圣杯，双飞翼）

3.双飞翼布局

双飞翼布局和圣杯布局的区别是：双飞翼布局实现是将main盒子的内容装入一个新盒子中，新盒子再设置一个左边距和右边距，取消box2盒子的左右边距。 实现代码

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box2 .main {
        float: left;
        width: 100%;
        height: 500px;      //此处将main盒子高度500px，方便观看
        background-color: pink;
    }

    .box2 .left {
        float: left;
        width: 100px;
        height: 400px;
        background-color: red;
        margin-left: -100%;

    }

    .box2 .right {
        float: left;
        width: 200px;
        height: 400px;
        background-color: blue;
        margin-left: -200px;
    }

    .box2 .main .content {      //将main盒子的内容装入一个新盒子中，
        margin-left: 100px;     //新盒子再设置一个左边距和右边距。
        margin-right: 200px;    
    }
</style>

<body>
    <div class="box2">
        <div class="main">
            <div class="content">
                <p>房价快速的回复大开杀戒恢复单身空间划分当升科技水电费第三方递四方速递第三方第三方房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技
                </p>
                <p>房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技</p>
                <p>房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技</p>
                <p>房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技</p>
                <p>房价快速的回复大开杀戒恢复单身空间划分第三方第三方的三分大赛当升科技</p>
            </div>
        </div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

效果图

CSS的传统布局方式（三栏，圣杯，双飞翼）

转载自:https://juejin.cn/post/7080063536294002719
评论
请登录