css很經典的兩種布局
class
="container"
>
class
="left"
>
div>
class
="right"
>
div>
div>
>
body
/* 清除浮動 */
.container::after
.left,.right
.left
.right
style
>
ps:不給父元素設定清除浮動，沒有clear-both的話，你會發現父元素沒有完全覆蓋子元素，存在高度塌陷的問題
>
body
/* 清除浮動 */
.container::after
.left,.right
.left
.right
style
>
>
body
.container
.left,.right
.left
.right
style
>
>
body
.container
.left,.middle,.right
.middle
.left
.right
style
>
class
="container"
>
class
="middle"
>
middlediv
>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
當margin/padding取百分比的值時，無論是 left/right 還是top/bottom，都是基於父元素的寬度
聖杯布局的關鍵點就是：父元素左右padding先騰出空間，左右子元素再相對自身定位，去填補這個空白
>
body
.left,.middle,.right
.inner
.middle
.left
.right
style
>
class
="container"
>
class
="middle"
>
class
="inner"
>
middlediv
>
div>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
雙飛翼布局的關鍵點：多加了個inner層包裹，然後設定左右margin把內容(content)擠到中間顯示
CSS實現 兩欄布局，三欄布局
aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...
CSS 三列布局（三欄布局）
傳統三列布局 左右定寬，中間自適應 1.絕對定位 外邊距實現 左右盒子絕對定位，固定於頁面左右兩側 中間盒子的 margin left,margin right 分別等於左右兩個盒子的寬度。css left middle right 2.浮動 外邊距實現 左右盒子浮動到頁面兩側，中間盒子的 marg...
兩欄布局和三欄布局的實現
左側固定，右側自適應，不給右側設定固定寬度即可 1 class wrap 2class left 3左側固定內容45 class right 6右側內容自適應78 3左側固定內容45 class right 6右側內容自適應78 3左側固定內容45 class right 6右側內容自適應78 3左...