flex 布局教程：語法篇(阮一峰)
flex 布局教程：例項篇(阮一峰)
grid網格布局教程(阮一峰)
html**中 main部分首先要放在cotent的最前部分。然後是left,right
將三者都 float:left , 再加上乙個position:relative (因為相對定位後面會用到）
main部分 width:100%佔滿
此時main佔滿了，所以要把left拉到最左邊，使用margin-left:-100%
這時left拉回來了，但會覆蓋middle內容的左端，要把main內容拉出來，所以在外圍content加上 padding:0 220px 0 200px
main內容拉回來了，但left也跟著過來了，所以要還原，就對left使用相對定位 left:-200px 同理，right也要相對定位還原 right:-220px
到這裡大概就自適應好了。如果想content高度保持一致可以給left main right都加上min-height:130px
*
body
header,
footer
.content
main,.left,.right
main
.left
.right
footer
>
頭部header
>
class
="content"
>
>
>
kdddddddddddddddd
dddddddddddddddflsdfl
fdsfddddddsdd
p>
main
>
class
="left"
>
>
i am leftp
>
aside
>
class
="right"
>
>
i am rightp
>
aside
>
div>
>
尾部footer
>
html**中，main要放最前邊，left right
將main left right 都float:left
將main佔滿 width:100%
此時main佔滿了，所以要把left拉到最左邊，使用margin-left:-100% 同理 right使用margin-left:-220px。
（這時可以直接繼續上邊聖杯布局的步驟，也可以有所改動）
main內容被覆蓋，除了使用外圍的padding，還可以考慮使用margin。
給main增加乙個內層div-- main-inner, 然後margin:0 220px 0 200px
/* 雙飛翼布局重點 */
.left,
.main,
.right
.main
.main-inner
.left
.right
class
="main"
>
class
="main-inner"
>
中心區div
>
div>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
左側定寬，右側自適應
.left
.right
bfc不會受到浮動元素的影響
左邊固定h1
>
div>
class
="main"
>
>
右邊自適應h1
*
.left,
.right,
.center
.left
.center
.right
class
=>
class
="left"
>
aside
>
class
="center"
>
>
flex布局h1
>
>
中間內容p
>
main
>
class
="right"
>
aside
>
div>
*
aside.left
aside.right
main.center
class
="left"
>
aside
>
class
="right"
>
aside
>
class
="center"
>
main
>
*.left
.center
.right
class
=>
class
="left"
>
aside
>
class
="center"
>
main
>
class
="right"
>
aside
>
div>
參考：詳解 css 七種三欄布局技巧
CSS樣式 布局篇
1.css基本樣式 背景語法 background background color background image background repeat background attachment background position background 000 url 位址 no repea...
CSS 多列布局篇
box 心有所信，方能行遠。面向未來，走好新時代的長征路，我們更心有所信，方能行遠。面向未來，走好新時代的長征路，我們更心有所信，方能行遠。面向未來，走好新時代的長征路，我們更心有所信，方能行遠。面向未來，走好新時代的長征路，我們更心有所信，方能行遠。面向未來，走好新時代的長征路，我們更心有所信，方...
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...