首先要用浮動搭建完整的布局
用margin來調整兩列的位置，使三列在同一行上
使用定位：調整兩旁的位置，讓它們分別在主要內容的兩端
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
*.header
.container .main
.container .left
.container .right
.footer
style
>
head
>
>
class
="header"
>
header
>
class
="container"
>
class
="main"
>
主要div
>
class
="left"
>
左邊div
>
class
="right"
>
右邊div
>
div>
class
="footer"
>
footer
>
body
>
html
>
.container
.container .main
.container .left
.container .right
.container .left
.container .right
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
>
.header
.box
.middle
.main
.left
.right
.footer
style
>
class
="header"
>
div>
class
="box"
>
class
="middle"
>
class
="main"
>
div>
div>
class
="left"
>
div>
class
="right"
>
div>
div>
class
="footer"
>
div>
body
>
html
>
不同：聖杯布局是其他非主要元素佔據了父容器的左右內邊距，而雙飛翼布局是將主要元素用乙個盒子裝起來並給其設定外邊距，非主要元素佔據外邊距。
聖杯和雙飛翼布局
聖杯布局 原理 給包裹層設定左右padding值空出left和right的位置，使用負邊距，左邊margin left 100 右邊margin left 100px 此時左右兩個盒子位於主盒子兩側但是會遮擋住主盒子的內容，所以再給左盒子position relative，left 100px，右盒...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...
聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...