圣杯布局和双飞翼布局

最新推荐文章于 2024-08-27 13:51:43 发布

QYY159818

最新推荐文章于 2024-08-27 13:51:43 发布

阅读量29

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_45917727/article/details/133041275

版权

1、两栏布局

左侧元素浮动，固定宽度，右侧元素设置overflow：hidden触发BFC，实现宽度自适应。

2、圣杯布局

两侧宽度固定，中间自适应，中间盒子放到最前，最先渲染。

<style>
        .container {
            width: 100%;
            height: 500px;
            background-color: #ccc;
            position: relative;
        }

        .main {
            width: 100%;
            height: 100%;
            background-color: #f40;
        }

        .left {
            width: 200px;
            height: 100%;
            background-color: blue;
            position: absolute;
            left: 0;
            top: 0;
        }

        .right {
            width: 200px;
            height: 100%;
            background-color: yellow;
            position: absolute;
            right: 0;
            top: 0;
        }

    </style>
</head>

<body>
    <!-- 圣杯布局 -->
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

3、双飞翼布局

两侧宽度固定，中间自适应，中间盒子放到最前，最先渲染。

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

        .header {
            height: 100px;
            background-color: green;
        }

        .main {
            height: 500px;
            background-color: red;
        }

        .main-left {
            float: left;
            width: 200px;
            height: 100%;
            background-color: blue;
            margin-left: -100%;
        }

        .main-center {
            float: left;
            width: 100%;
            height: 100%;
            background-color: yellow;
        }

        .main-right {
            float: left;
            width: 200px;
            height: 100%;
            background-color: black;
            margin-left: -200px;
        }

        .footer {
            width: 100%;
            height: 100px;
            background-color: peru;
        }


    </style>
</head>

<body>
    <!-- 双飞翼布局 -->
    <div class="header">header</div>
    <div class="main">
        <div class="main-center">center</div>
        <div class="main-left">left</div>
        <div class="main-right">right</div>
    </div>
    <div class="footer">footer</div>
</body>