三栏布局之圣杯布局、双飞翼布局

最新推荐文章于 2023-02-24 15:33:36 发布

EIERICA

最新推荐文章于 2023-02-24 15:33:36 发布

阅读量216

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/EIERICA/article/details/104209683

版权

文章都是自己平时的一些积累和感悟，若有问题，欢迎指出。

一、圣杯布局

圣杯布局和双飞翼布局是经典的三栏布局。实现了左右两侧固定中间自适应的布局。圣杯布局主要是利用float、相对定位、容器的padding来完成布局。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <title>test page</title>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #header {
            width: 100%;
            height: 100px;
            background-color: burlywood;
            text-align: center;
        }

        #footer {
            width: 100%;
            height: 100px;
            background-color: burlywood;
            text-align: center;
        }

        #container {
            /* 设置BFC，包住float元素 */
            overflow: hidden;
            /* 制造空白 */
            padding: 0 300px 0 200px;
        }

        #left {
            width: 200px;
            height: 300px;
            background-color: red;
            /* 脱离文档流 */
            float: left;
            position: relative;
            /* 我的理解是margin-left为-100%是使div可以往上一层 */
            margin-left: -100%;
            left: -200px;
        }

        #right {
            background-color: yellow;
            width: 300px;
            height: 300px;
            /* 脱离文档流 */
            float: left;
            position: relative;
            margin-left: -300px;
            right: -300px;
        }

        #middle {
            background-color: blue;
            width: 100%;
            height: 300px;
            /* 脱离文档流 */
            float: left;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="container">
        <div id="middle">middle</div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
</body>

</html>

直接给代码可能有点乱，具体的步骤是：
1.设置各个元素的宽高，设置middle的宽度为100%。
2.设置容器container为BFC，可以包裹住float元素，并且对后面的元素不造成影响。
3.使left、right、middle脱离文档流，设置float属性。
4.设置容器container的padding属性，制造空白，留出left和right的位置。
5.设置left和right的margin-left属性为-100%和-rightwidth，使其和middle处于同一层。
6.设置left、right、middle元素的position属性为relative，令他们可以相对于他们的正常位置移动。
7。设置left元素的left属性值为-leftwidth，right元素的right属性值为-rightwidth。可以她们移动到正确的位置，不挡住中间的middle元素。
效果图：
圣杯布局

二、双飞翼布局

实现双飞翼布局和圣杯布局很像，只是实现中间自适应部分的方式不一样，双飞翼布局在middle中又加入了middle-inner，用middle-inner的margin来制造空白是left和right可以放在左右侧。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <title>test page</title>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #header {
            width: 100%;
            height: 100px;
            background-color: burlywood;
            text-align: center;
        }

        #footer {
            width: 100%;
            height: 100px;
            background-color: burlywood;
            text-align: center;
        }

        #container {
            /* 设置BFC，包住float元素 */
            overflow: hidden;
        }

        #left {
            width: 200px;
            height: 300px;
            background-color: red;
            /* 脱离文档流 */
            float: left;
            /* 我的理解是margin-left为-100%是使div可以往上一层 */
            margin-left: -100%;
        }

        #right {
            width: 300px;
            height: 300px;
            /* 脱离文档流 */
            float: left;
            background-color: yellow;
            margin-left: -300px;
        }

        #middle {
            background-color: blue;
            width: 100%;
            height: 300px;
            /* 脱离文档流 */
            float: left;
        }

        #middle-inner {
            background-color: yellowgreen;
            height: 300px;
            /* 使用margin留出left和right的宽度 */
            margin: 0 300px 0 200px;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="container">
        <div id="middle">
            <div id="middle-inner">middle-inner</div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
</body>

</html>

直接给代码可能有点乱，具体的步骤是：
1.设置好各个div的宽高，中间自适应部分width为100%。
2.设置container为BFC，可以包裹住float元素，使其他元素不受影响。
3.脱离文档流，设置middle、left、right的float属性。
4.设置middle-inner的margin，制造空白留出left和right的位置。
5.left和right使用margin-left属性使其固定到自己的位置。
效果图：
双飞翼布局