html--雙飛翼佈局

時間 2019-11-20

標籤 html 雙飛佈局欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--兩組實現的對比:
        1.倆種佈局方式都是把主列放在文檔流最前面，使主列優先加載。
        2.兩種佈局方式在實現上也有相同之處，都是讓三列浮動，而後經過負外邊距造成三列布局。
        3.兩種佈局方式的不一樣之處在於如何處理中間主列的位置：
                聖盃佈局是利用父容器的左、右內邊距+兩個從列相對定位；
                雙飛翼佈局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行佈局調整
        -->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                min-width: 600px;
            }
            
            
            /*頭部 腳部樣式*/
            #header,#footer{
                border: 1px solid;
                background: gray;
                text-align: center;
            }
            
            /*三列的僞等高佈局*/
            #content .middle,#content .left,#content .right{
                /*padding-bottom:10000px ;
                margin-bottom: -10000px;*/
                height: 50px;
                line-height: 50px;
                float: left;
            }
            
            /*雙飛翼佈局*/
            #content{
                overflow: hidden;
            }
            #content .middle{
                width: 100%;
                background: deeppink;
            }
            #content .middle .m_inner{
                padding: 0 200px;
            }
            #content .left,#content .right{
                background: pink;
                width: 200px;
                text-align: center;
            }
            #content .left{
                margin-left: -100%;
            }
            #content .right{
                margin-left: -200px;
            }
            
        </style>
    </head>
    <body>
        <div id="header">
            <h4>header</h4>
        </div>
        <div id="content">
            <div class="middle">
                <div class="m_inner">
                    middle
                </div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div id="footer">
            <h4>footer</h4>
        </div>
    </body>
</html>

css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。