聖盃佈局雙飛翼佈局

時間 2019-11-16

標籤佈局雙飛简体版

原文原文鏈接

概述

要求：兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。
異同點：聖盃是採用left和right相對定位的方式；而雙飛翼是在center裏面又建立了一個子div，在該子div裏用margin-left和margin-right爲左右兩欄div留出位置。php

聖盃佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>雙飛翼</title>
    <style type="text/css">
        #header, #footer{
            height: 30px;
            background: #ccc;
        }
        #left{
            background: red;
            height: 100px;
        }
        #center{
            background: green;
            height: 100px;
        }
        #right{
            background: yellow;
            height: 100px;
        }
    </style>


    <style type="text/css">
        body {
          min-width: 550px;     
        }
        #container {
          padding-left: 200px;
          padding-right: 150px;     
        }
        .column{
            float: left;
        }
        #center {
          width: 100%;

        }
        #left {
          width: 200px;                 
          margin-left: -100%;  
          position: relative;
          left:-200px;

          /*對於浮動元素，負margin值等於100%可讓元素上去,而且和開始的位置頭部對齊*/
        }
        #right {
          width: 150px;          
          margin-left: -150px;  
          position: relative;
          right:-150px;
          /*對於浮動元素，負margin值等於自己可讓元素上去*/
        }

        #footer {
          clear: both;
        }
    </style>
</head>
<body>
    <div id="header">頭部</div>
    <div id="container">
        <div id="center" class="column">1234</div>
        <div id="left" class="column">左側邊欄，固定寬度</div>
        <div id="right" class="column">右側邊欄，固定寬度</div>
    </div>
    <div id="footer">尾部</div>
</body>
</html>

雙飛翼佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>雙飛翼</title>
    <style type="text/css">
        #header, #footer{
            height: 30px;
            background: #ccc;
        }
        #left{
            background: red;
            height: 100px;
        }
        #center{
            background: green;
            height: 100px;
        }
        #right{
            background: yellow;
            height: 100px;
        }
    </style>


    <style type="text/css">
        body {
          min-width: 550px;     
        }
        #container {
        }
        .column{
            float: left;
        }
        #center {
          width: 100%;
        }
        #left {
          width: 200px;                 
          margin-left: -100%;  
          /*對於浮動元素，負margin值等於100%可讓元素上去,而且和開始的位置頭部對齊*/
        }
        #right {
          width: 150px;          
          margin-left: -150px;  
          /*對於浮動元素，負margin值等於自己可讓元素上去*/
        }
        #center .center-wrap{
            margin-left:200px;
            margin-right: 100px;
        }
        #footer {
          clear: both;
        }
    </style>
</head>
<body>
    <div id="header">頭部</div>
    <div id="container">
        <div id="center" class="column">
            <div class="center-wrap"> 雙飛翼佈局指兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。</div>
        </div>
        <div id="left" class="column">左側邊欄，固定寬度</div>
        <div id="right" class="column">右側邊欄，固定寬度</div>
    </div>
    <div id="footer">尾部</div>
</body>
</html>

參考文章
http://www.cnblogs.com/tinyphp/p/4742922.html
css