CSS之圣杯布局和双飞翼布局

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

逸尘️

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

阅读量649

点赞数

分类专栏： css 文章标签： css 圣杯布局双飞翼布局响应式

本文链接：https://blog.csdn.net/haoaiqian/article/details/71908587

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

圣杯布局的构造过程：

<div class="container">
    <!--先写中间部分-->
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

三者都设置向左浮动。
设置middle宽度为100%。
设置负边距，.left设置负左边距为100%，.right设置负左边距为负的自身宽度。
设置container的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位，.left的left值为负的.left宽度，.right的right值为负的.right宽度。

圣杯布局有个问题，当面板的middle部分比两边的子面板宽度小的时候，布局就会乱掉。双飞翼布局在middle上添加一个标签解决了此问题。

双飞翼布局的构造过程：

<!--先写中间部分-->
<div class="middle">
    <div class="middle-son"></div>
</div>
<div class="left"></div>
<div class="right"></div>

三者都设置向左浮动。
设置middle宽度为100%。
设置负边距，.left设置负左边距为100%，.right设置负左边距为负的自身宽度。
设置middle-son的margin值给左右两个子面板留出空间。

二者区别：

双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。
双飞翼布局不用设置相对布局，以及对应的left和right值。

圣杯布局demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo-圣杯布局</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        min-width: 650px;
    }
    header,footer{
        text-align: center;
        background: #aaaaaa;
    }
    .container{
        overflow: hidden;
        padding: 0 200px 0 200px;;
    }
    .middle{
        position: relative;
        float: left;
        width: 100%;
        background: red;
        height: 100px;
    }
    .left{
        position: relative;
        float: left;
        width: 200px;
        background: green;
        height: 100px;
        margin-left: -100%;
        left: -200px;
    }
    .right{
        position: relative;
        float: right;
        width: 200px;
        background: yellow;
        height: 100px;
        margin-left: -200px;
        right: -200px;

    }
</style>
</head>
<body>
<header><h1>header</h1></header>

<div class="container">
    <!--先写中间部分-->
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

<footer><h1>footer</h1></footer>
</body>
</html>

双飞翼布局demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        body{
            min-width: 650px;
        }
        header,footer{
            text-align: center;
            background: #aaaaaa;
        }
        .middle-son{
            margin: 0 200px 0 200px;
            height: 100px;
        }
        .middle{
            float: left;
            height: 100px;
            width: 100%;
            background: red;
        }
        .left{
            float: left;
            width: 200px;
            height: 100px;
            background: green;
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 200px;
            height: 100px;
            background: yellow;
            margin-left: -200px;
        }
    </style>
</head>
<body>

<header><h1>header</h1></header>

<!--先写中间部分-->
<div class="middle">
    <div class="middle-son"></div>
</div>
<div class="left"></div>
<div class="right"></div>


<footer><h1>footer</h1></footer>

</body>
</html>