左右兩欄布局
實現頁面兩欄布局最簡單的就是左右兩欄定寬加浮動,這也是對於新手常見的布局方式,並不是說這樣布局有多差勁,缺點一籮筐,凡是要依據實際情況而定,有時候那樣布局也是最佳的,簡單粗暴。這裡主要說下實現兩欄自適應布局的幾種方式。
1.左右兩欄向左浮動,左邊設定相對定位和margin-right負值
#left#right
左邊
右邊
2.左欄浮動,右欄觸發bfc,有關觸發bfc的多種方式,這裡就不詳細說明了,常見的有,display:inline-block | table-cell | table-caption ; float:left | right;等等....
#left1
#right1
實現三欄自適應布局
這裡主要針對聖杯布局和雙飛翼布局做簡單闡述,,已經了解的童鞋可以略過啦。。。
聖杯布局(名字看起來好厲害的樣子...),這種方式的缺點就是受外部最小寬度的限制,原因在父級加了左右padding值,左右兩欄相對定位,用了負的left和right.
.container
#main-page,#left-page,#right-page
#main-page
#left-page
#right-page
雙飛翼布局
其實這個跟聖杯布局有點類似,也是目前用的比較多的一種,主要區別在於中間主體部分外部包裹了乙個div,main-page放主體內容,讓後新增左右margin值.
/*雙飛翼*/
#main-wrap,#left-page1,#right-page1
#main-wrap
#main-page1
#left-page1
#right-page1
兩欄以及三欄自適應布局
左邊寬度200px,右邊自適應寬度 左右兩邊都絕對定位,父元素相對定位 left right right parent left right 父元素 relative 左邊列 absolute 右邊 absolute,left 100px,right 0 實現自適應 左邊設定margin 可把兩列分...
三欄布局 自適應
趴趴熊,我們走 個人簡介,是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介是求職者向欲供職單位全面 簡潔 條理清晰地自我介紹 自我推薦的文書。簡介是應用寫作學研究的一種日常應用文體。p 個人簡介,是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介...
三欄自適應布局
實現左中右三欄布局,左右為固定寬度,中間寬度隨父元素寬度變化 父元素設定display flex 左右盒子寬度固定,中間盒子設定flex 1 container left center right style class container class left div class center d...