圣杯布局和雙飛翼布局的理解

圣杯和雙飛翼布局都是左右兩欄寬度固定，中間部分寬度自適應。

圣杯布局

參考：http://www.alistapart.com/articles/holygrail/
1、創建HTML結構

<body>
    <div id="header">header</div>
    <div id="container"></div>
    <div id="footer"></div>
</body>

在css添加樣式：

#header, 
#footer {
  height: 30px;
  background: #666;
}

2、在#container添加列，網頁被瀏覽器解析時，按照中間、左、右的順序進行加載 —— 也就是我們常說的”重要的內容先加載”。html代碼中 middle部分首先要放在container的最前部分，然后是left,right。

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

在css添加對應的樣式：

#container:after {
    content: '';
    display: block;
    clear: both;
}
.middle,
.left,
.right {
  float: left;
  height: 200px;    
}
.middle {
    width: 100%;
    background: #ccc;
}
.left {
   width: 200px;
   background: blue;
}
.right {
  width: 150px;
  background: orange;
}

此時頁面效果如下：middle、left、right都設置左浮動，middle的width為100%自適應，所以占據一整行，left、right被擠到下一行；清除浮動使#footer不受影響。


3、將左列和右列放在對應的位置與middle在同一水平位置。
把left的左邊距設置為負的middle的寬度，left才會移動到最左邊與middle在同一行。

.left {
   width: 200px;
   margin-left: -100%;
   background: blue;
}

把right的左邊距設置為負的自身寬度，讓它移動到最右邊和middle在同一行。

.right {
  width: 150px;
  margin-left: -150px;
  background: orange;
}

此時的效果如下，三欄在同一行。



4、雖然三欄都在同一行，但middle的左右部分都被left、right重疊遮住。所以給#container設置左右填充，往中間擠。

#container {
  padding: 0 150px 0 200px;
}

5、#container往中間擠后，左右留出的空間剛好可以給left和right。對left和right設置position：relative；相對自身位置移動到對應的位置。

.left {
   position: relative;
    right: 200px;
   width: 200px;
   margin-left: -100%;
   background: blue;
}
.right {
  position: relative;
  left: 150px;
  width: 150px;
  margin-left: -150px;
  background: orange;
}

最后的效果如下：


注意： 在瀏覽器調整大小時，當middle的寬度小于left的寬度時，布局會亂掉，middle會下移。所以在body設置最小寬度為2*left的寬度+right的寬度，當頁面達到最小寬度時，middle的寬度等于left的寬度，不會小于。

body {
    min-width: 550px;
}

總的代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>圣杯布局</title>
  <style type="text/css">
  /*圣杯布局：網頁被瀏覽器解析時，按照中間、左、右的順序進行加載 —— 也就是我們常說的”重要的內容先加載”。
  1.
    #container里的三欄float：left；
    #middle的寬度是自適應的 width：100%，#left和#right的寬度時固定的width都為200px；
    所以#main占據一行，#left和#right被擠到下一行。

  2.要把#left和#right放在#main的左右兩側，使用負邊距
        （#left）margin-left：-100%；
        （#right）margin-left：-200px；
            此時#left、#right雖然位置對了，但是是疊加在#middle的左右上，遮住了#middle的左右的部分。
    3.給#middle設置padding，padding-left：200px（#left的寬度）；padding-right：200px（#right的寬度）；
    4.給#left和#right設置position：relative；使其相對于自己的位置偏移到合適的位置。
  */
        body {
        min-width: 550px; /* 2lw+rw 2倍的左欄寬度+右欄寬度 當middle的寬度小于left的寬度時，布局才不會亂*/
    }
    #container:after {
        content: '';
        display: block;
        clear: both;
    }

    #header,#footer {
        height: 50px;
        background: #666;
    }

    #container {
        padding: 0 150px 0 200px;
        overflow: hidden;
    }

    #container .column {
        position: relative;
        float: left;
        height: 300px;
    }

    #middle {
        width: 100%;
        background: #ccc;
    }

    #left {
        right: 200px;
        width: 200px;
        margin-left: -100%;
        background: blue;
    }
    #right {
        left: 150px;
        width: 150px;
        margin-left: -150px;
        background: orange;
    }

    </style>
</head>
<body>
  <div id="header">header</div>
    <div id="container">
      <div id="middle" class="column">middle</div>
        <div id="left" class="column">left</div>
        <div id="right" class="column">right</div>
    </div>
    <div id="footer">footer</div>
</body>
</html>

雙飛翼布局

雙飛翼布局跟圣杯布局差不多，只是做了點修改。
1、創建HTML結構

<div id="header">header</div>
<div id="main"></div>
<div class="sub">sub</div>
<div class="extra">extra</div>
<div id="footer">footer</div>

在css添加樣式：

#header, 
#footer {
  height: 30px;
  background: #666;
}
.sub,
.main,
.extra{ 
        float: left;
        min-height: 130px;
 }
.sub{
        width: 200px;
        background: red;
 }
.extra{
        width: 220px;
        background: blue;
 }
.main{ 
        width: 100%;
 }
.footer {
        clear: both;
}

此時頁面效果如下：main、sub、extra都設置左浮動，main的width為100%自適應，所以占據一整行，sub、extra被擠到下一行；清除浮動使#footer不受影響。

2、將sub和extra放在對應的位置與main在同一水平位置。
把sub的左邊距設置為負的main的寬度，sub才會移動到最左邊與main在同一行；把extra的左邊距設置為負的自身寬度，讓它移動到最右邊和main在同一行。

.sub{
    width: 200px;
    margin-left: -100%;
    background: red;
}
.extra{
    width: 220px;
    margin-left: -220px;
    background: blue;
}

效果如下：


3、main內容被覆蓋了吧，除了使用外圍的padding，還可以考慮使用margin。給main增加一個內層div-- main-inner, 然后margin:0 220px 0 200px。

<div class="header">header</div>
<div class="main">
    <div class="main-inner">main</div>
</div>
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="footer">footer</div>

.main-inner {
    margin: 0 220px 0 200px;
    height: 200px;
    background: #999;
}

完整代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>雙飛翼</title>
  <style>
  body {
    min-width: 700px; 
}

.header, 
.footer {
  height: 30px;
  background: #666;
}

.sub,
.main,
.extra{ 
    float: left;
    height: 200px;
}
.sub{
    width: 200px;
    margin-left: -100%;
    background: red;
}
.extra{
    width: 220px;
    margin-left: -220px;
    background: blue;
}
.main{ 
    width: 100%;
}

.footer {
    clear: both;
}

.main-inner {
    margin: 0 220px 0 200px;
    height: 200px;
    background: #999;
}
  </style>
</head>
<body>
    <div class="header">header</div>
    <div class="main">
        <div class="main-inner">main</div>
    </div>
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="footer">footer</div>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容