①html**中middle部分首先要放在container的最前部分，然後是left,right
②將三者都 float:left , 再加上乙個position:relative (因為相對定位後面會用到）
③middle部分 width:100%佔滿
④此時middle佔滿了，所以要把left拉到最左邊，使用margin-left:-100%
⑤這時left拉回來了，但會覆蓋middle內容的左端，要把middle內容拉出來，所以在外圍container加上 padding:0 220px 0 200px
⑥.middle內容拉回來了，但left也跟著過來了，所以要還原，就對left使用相對定位 left:-200px 同理，right也要相對定位還原 right:-220px
⑦到這裡大概就自適應好了。如果想container高度保持一致可以給left middle right都加上min-height:130px
>聖杯布局
title
>
<
style
>
*body
.left,.right,.middle
.left
.middle
.right
.container
style
>
head
>
<
body
>
<
div
class
="container"
>
<
div
class
="middle"
>middle
div>
<
div
class
="left"
>left
div>
<
div
class
="right"
>right
div>
div>
body
>
html
>
①main看成是鳥的身體，sub和extra則是鳥的翅膀，左翅sub有200px,右翅extra..220px.. 身體main自適應未知
②html**中，main要放最前邊，sub extra放在後面
③將main sub extra 都float:left
④將main佔滿 width:100%
⑤此時main佔滿了，所以要把sub拉到最左邊，使用margin-left:-100% 同理 extra使用margin-left:-220px
⑥main內容被覆蓋了吧，除了使用外圍的padding，還可以考慮使用margin。給main增加乙個內層div-- main-inner, 然後margin:0 220px 0 200px
>雙飛翼布局
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 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...