双飞翼布局

最新推荐文章于 2022-03-21 22:52:55 发布

Kong_十六

最新推荐文章于 2022-03-21 22:52:55 发布

阅读量110

点赞数

分类专栏： # Web—CSS初级

本文链接：https://blog.csdn.net/qq_42383764/article/details/103626556

版权

Web—CSS初级专栏收录该内容

21 篇文章 0 订阅

订阅专栏

双飞翼布局与圣杯布局的区别就在于中间栏自适应的处理不同。

圣杯布局对中间栏的处理是直接使用中间部分的padding或者是margin值来显示中间的内容，而双飞翼则是在中间栏中再添加一个容器main的div，让内容在main中显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双飞翼</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 500px;
            background-color: antiquewhite;
        }

        #header{
            width: 100%;
            height: 100px;
            background-color: coral;
        }
        #contenter{
            width: 100%;
            height: 300px;
            /* 因为浮动的原因，left和right两栏均在中间栏的上面，所以中间栏的内容
            会被遮挡住，故而设置padding值  把左右两栏的位置留出来
            分别设置左右内边距的值为左右两栏的固定宽度值*/
            padding-left: 200px;
            padding-right: 150px;
        }
        /*圣杯和双飞翼的主要区别就在这里，双飞翼采取的是在新建一个容器*/
        #main{
            width: 100%;
            height: 300px;
            background-color: pink;
            float: left;
        }
        /*#main{*/
            /*adding-left: 200px;*/
            /*padding-right: 150px;*/
        /*}*/
        #left{
            width: 200px;
            height: 300px;
            /* 在设置浮动之后三栏应该在同一行上，因为中间栏是自适应宽度
            所以left和right被挤到下一行，因而要设置left的margin-left为-100%
            把left拉回到中间栏的最左侧 */
            margin-left: -100%;

            /* 这里设置相对定位是为了让左侧挡住的中间栏部分内容显示出来 */
            position: relative;
            left: -200px;
            background-color: hotpink;
            float: left;
        }
        #right{
            width: 150px;
            height: 300px;
            margin-left: -200px;
            position: relative;
            left: -150px;
            background-color: deeppink;
            float: left;
        }
        #footer{
            width: 100%;
            height: 100px;
            clear: left;
            background-color: coral;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div id="contenter">
    <div id="middle">
<!--        这里是新建的一个容器-->
        <div id="main">
            middle
        </div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
<div id="footer" class=clearfloat"">footer</div>
</body>
</html>