CSS圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

目的：
1）三栏布局
2）两侧内容固定，中间内容随着宽度自适应
3）一般用于PC 网页

圣杯布局和双飞翼布局技术总结
1）使用float布局
2）两侧使用margin负值，以便和中间内容横向重叠
3）防止中间内容被两侧覆盖，一个用padding一个用margin

圣杯布局的实现
1 container包裹center left right三个元素
2 center left right添加float=left
3 center的width100% left和right随意大小
4 container左右padding分别设置为 left right宽度的大小（恢复到一排后留地方）
5 对于left的操作

 #left{
    position: relative;
    background-color: yellow;
    width: 200px;
    margin-left: -100%;//正常是在第二行，左移到第一行，和center平齐
    right: 200px;//再往前移动自身宽度大小， relative保证了是相对自己移动
}

6 对于right的操作

#right{
    position: relative;
    background-color:red;
    width: 100px;
    margin-right: -100px; //把自己挤到上一排
}

完整代码如下

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            min-width: 550px;
        }
        #header{
            text-align: center;
            background-color: #f1f1f1;
        }
        #center{
            background-color: #ccc;
            width: 100%;
        }
        #container{
            padding-right: 150px;
            padding-left: 200px;
        }
        #left{
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right{
            position: relative;
            background-color:red;
            width: 150px;
            margin-right: -150px;

        }
        #footer{
            clear:both;
            text-align: center;
            background-color: #f1f1f1;
        }
        .column{
            float: left;
        }

    </style>
</head>
<body>
<div id="header">
    this is header
</div>
<div id="container">


    <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">
    this is footer
</div>
</body>
</html>

双飞翼布局过程
1 center left right 的float：left
2 container给center的左右留空圣杯用的是padding 双飞翼用margin：0 190 0 190
3 left操作 margin-left:-100%
4 right操作 margin-right：-190px
完整代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #left{
            width: 190px;
            height: 200px;
            background-color: yellow;
            margin-left: -100%;
        }
        #right{
            width: 190px;
            height: 200px;
            background-color: red;
            margin-left: -190px;
        }
        .col{
            float: left;
        }
        #main-wrap{
            margin:  0 190px 0 190px
        }
    </style>
</head>
<body>

    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div class="col" id="left">left</div>
    <div id="right" class="col">right</div>

最后编辑于：2020.10.28 12:18:59