關於實現頁面兩欄,三欄自適應布局方法總結

2021-09-02 13:24:17 字數 1290 閱讀 5361

左右兩欄布局

實現頁面兩欄布局最簡單的就是左右兩欄定寬加浮動,這也是對於新手常見的布局方式,並不是說這樣布局有多差勁,缺點一籮筐,凡是要依據實際情況而定,有時候那樣布局也是最佳的,簡單粗暴。這裡主要說下實現兩欄自適應布局的幾種方式。

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...