一. 聖杯布局
首先中間部分寬度肯定設定100%自適應，即width: 100%;左右兩個元素都固定寬度，將三個元素都設定浮動，即float: left;
因為之前main元素設定了寬度100%，且浮動，所以佔據了第一行整行，下面需要將left元素放到左邊，right元素放到右邊；則需要分別設定負值margin-left,給left元素設定 margin-left: -100%；（相當於往左移動一整行的距離），設定right元素 margin-left: -200px; （往左移動自身寬度大小的距離）,此時left和right兩個元素就已經放在左右兩個位置。
此時需要擺正中間元素，則需要給三個元素的父元素設定padding，左右 padding大小為left和right元素的寬度。
第三步設定完成後，需要分別給left元素設定相對定位 position: relative; 並設定 left： -200px; 給right 元素設定 position:relative; right: -200px; 目的是將left和right元素相對於自身原來的位置分別往左和往右移到自己正確的位置上去。
此時已經基本完成聖杯布局，但有乙個缺陷，那就是中間內容過多時，頁面寬度過小時，布局會錯亂，此時需要給body乙個最小寬度，這個值是多少了？不是隨便給的，值的大小為left的寬度*2加上right的寬度。（回想之前left使用了position: relative，所以就意味著在main開始的區域，還存在著乙個left的寬度，故min-width = leftwidth + rightwidth + leftwidth）
**如下所示：
<
!doctype html>
"utf-8"
>
"x-ua-compatible" content=
"ie=edge"
>
聖杯布局<
/title>
"description" content=
"">
"viewport" content=
"width=device-width, initial-scale=1"
>
* body
.bd.main
.left
.right
.fl<
/style>
<
/head>
="bd"
>
="main fl"
>
main mainmainmainmainmainmainmainmainmainmain
<
/div>
="left fl"
>
left
<
/div>
="right fl"
>
right
<
/div>
<
/div>
<
/body>
<
/html>
雙飛翼布局和上面的聖杯布局基本上一樣，稍微有點不一樣，就是將中心區域外麵包了一層父元素，父元素與left和right元素同級，前面寬度及浮動設定沒變，唯一的區別就是不用padding和相對定位了，而是在main的內部main-content元素設定乙個margin值，左右margin值大小就是left和right的寬度大小，而且不存在上面的缺陷問題，
<
!doctype html>
"utf-8"
>
"x-ua-compatible" content=
"ie=edge"
>
雙飛翼布局<
/title>
"description" content=
"">
"viewport" content=
"width=device-width, initial-scale=1"
>
*.main-content
.main
.left
.right
.fl<
/style>
<
/head>
="bd"
>
="main fl"
>
="main-content"
>
main main main main main main main main main
<
/div>
<
/div>
="left fl"
>
left
<
/div>
="right fl"
>
right
<
/div>
<
/div>
<
/body>
<
/html>
<
!doctype html>
"utf-8"
>
"x-ua-compatible" content=
"ie=edge"
>
flex布局<
/title>
"description" content=
"">
"viewport" content=
"width=device-width, initial-scale=1"
>
*.bd
.main
.left
.right
<
/style>
<
/head>
="bd"
>
="main"
>
mainmainmainmainmainmainmainmainmainmain
<
/div>
="left"
>
left
<
/div>
="right"
>
right
<
/div>
<
/div>
<
/body>
<
/html>
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...
聖杯布局和雙飛翼布局
一 聖杯布局 重點 content的padding，left的margin left和left值，right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...