圣杯布局和双飞翼布局

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

置顶冰雪奇缘lb

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

阅读量775

点赞数 3

分类专栏： HTML 文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_44682587/article/details/122377668

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

三栏布局

圣杯布局和双飞翼布局是经典的三栏布局方案
在这里插入图片描述

圣杯布局

圣杯布局通过 margin负值 和 相对定位 实现的思路：
（1）在一个大的盒子设置 padding-left 和 padding-right 值（这三个盒子是兄弟关系）。
（2）两个盒子填充这个大盒子的左右两边空白处。
（3）左边那个盒子通过设置 margin-left: -100% 移动到大盒子内部左边，再通过相对定位向左移动一个小盒子的宽度。
（4）右边的那个小盒子设置 margin-right: - 小盒子宽度 ，使小盒子填充大盒子右边的空白区域。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>实现圣杯布局</title>
        <style>
            body {
                min-width: 500px;
            }

            div {
                text-align: center;
            }

            #header {
                background-color: #f1f1f1;
            }

            #content {
               padding-left: 300px;
                padding-right: 200px;
            }
            
            #content #center {
                background-color: #ddd;
                width: 100%;
            }

            #content #left {
                position: relative;
                background-color: orange;
                width: 300px;
                margin-left: -100%;
                right: 300px;
            }

            #content #right {
                background-color: green;
                width: 200px;
                margin-right: -200px;
            }

            #content .column {
                float: left;
            }
            
            #footer {
                background-color: #f1f1f1;
                clear: both;
            }
        </style>
    </head>
    </head>
    <body>
        <h1 style="width: 100%; text-align: center;">实现圣杯布局<h1>
        <div id="header">Header</div>
        <div id="content">
            <div id="center" class="column">Center</div>
            <div id="left" class="column">Left</div>
            <div id="right" class="column">Right</div>
        </div>
        <div id="footer">Footer</div>
    </body>
</html>

双飞翼布局

双飞翼布局通过 margin负值 实现的思路：
（1）三个盒子是兄弟关系。
（2）在中间的这个大盒子包含一个内部盒子，内部盒子设置 margin-left 和 margin-right 。
（3）左边那个盒子通过设置 margin-left: -100% 移动到大盒子内部左边，正好填补大盒子内部盒子的左外边距留下的空白。
（4）右边的那个小盒子设置 margin-left: -小盒子宽度，向左移动一段距离，使小盒子填补大盒子右边的空白区域。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body {
                min-width: 500px;
            }
            div {
                text-align: center;
            }

            #main {
                background-color: #ddd;
                width: 100%;
            }
            
            #main #main-wrapper {
                margin-left: 100px;
                margin-right: 50px;
            }
            
            #left {
                background-color: orange;
                width: 100px;
                margin-left: -100%;
            }

            #right {
                background-color: green;
                width: 50px;
                margin-left: -50px;
            }
            
            .column {
                float: left;
            }
        </style>
    </head>
    <body>
        <h1 style="text-align: center;">实现双飞翼布局</h1>
        <div id="main" class="column">
            <div id="main-wrapper">Main</div>
        </div>
        <div id="left" class="column">Left</div>
        <div id="right" class="column">Right</div>
    </body>
</html>