圣杯布局及双飞翼布局、弹性盒模型

圣杯布局及双飞翼布局主要用于解决左右两边盒子固定宽度。中间盒子宽度自适应的问题。

圣杯布局：

<!doctype html>
<html>

    <head>
        <title>圣杯布局</title>
        <meta charset="utf-8">
        <style>
            body {
                min-width: 800px;
                margin: 0;
                padding: 0;
            }
            
            .container {
                padding: 0 300px 0 200px;
                overflow: hidden;
            }
            
            .header {
                width: 100%;
                height: 100px;
                background-color: lightblue;
            }
            
            .footer {
                width: 100%;
                height: 50px;
                background-color: lightblue;
            }
            
            .middle,
            .left,
            .right {
                position: relative;
            }
            
            .middle {
                float: left;
                width: 100%;
                height: 100px;
                text-align: center;
                background: lightcoral;
            }
            
            .left {
                float: left;
                width: 200px;
                margin-left: -100%;
                left: -200px;
                height: 100px;
                background: lightgreen;
            }
            
            .right {
                float: left;
                width: 300px;
                height: 100px;
                margin-left: -300px;
                right: -300px;
                background: lightseagreen;
            }
        </style>
    </head>

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

        <div class="footer">footer</div>
    </body>

</html>

双飞翼布局：

<!doctype html>
<html>

    <head>
        <title>双飞翼布局</title>
        <meta charset="utf-8">
        <style>
            body {
                min-width: 800px;
                margin: 0;
                padding: 0;
            }
            
            .container {
                width: 100%;
                height: 100px;
                background-color: red;
                float: left;
            }
            
            .header {
                width: 100%;
                height: 100px;
                background-color: lightblue;
            }
            
            .footer {
                width: 100%;
                height: 50px;
                clear: both;
                background-color: lightblue;
            }
            
            .middle {
                margin: 0 300px 0 200px;
            }
            
            .left {
                float: left;
                width: 200px;
                margin-left: -100%;
                height: 100px;
                background: lightgreen;
            }
            
            .right {
                float: left;
                width: 300px;
                height: 100px;
                margin-left: -300px;
                background: lightseagreen;
            }
        </style>
    </head>

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

</html>

另外用弹性盒模型可以很容易的构造三列布局

<html>
    <head>
        <meta charset="utf-8">
        <title>另外用弹性盒模型可以很容易的构造三列布局</title>     
        <style>
            body{
                margin: 0;
            }
            .container{
                display: flex;
                height: 100px;
            }
            .middle{
                width: 100%;
                background: lightblue;
            }
            .left,.right{
                background: lightcoral;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">left</div>
            <div class="middle">middle</div>
            <div class="right">right</div>
        </div>
    </body>
</html>

来源：https://www.cnblogs.com/1212dsa/p/11438261.html

标签

双飞翼

background