三欄網頁寬度自適應布局方法

一、絕對定位法

html片段如下：

left

main
right

html,body 

#left,#right
#left 
#main 
#right

main

left
right

.col 

#main 
.mainin
#left 
#right 

main

left
right

#wrap

.col
#main
#left
#right

,為了把left和right定位到左右部分，採用負邊距，left部分margin-left:

，right部分margin-left: -150px。兩種布局的區別：相比聖杯布局，雙飛翼不必設定左右欄的position:relative，也不必設定左右left、right值，只需多新增乙個子元素包含，相應的padding換成margin。聖杯布局和雙飛翼布局的中間欄要放在文件流前面以優先渲染。

四、flex布局實現上面的效果

left

main
right

#wrap

.col

#left
#main
#right

三種三欄網頁寬度自適應布局方法

內容提要 在如今各個解析度顯示器n足鼎立的時期，頁面採用流動性布局 亦可稱自適應布局 不失為乙個好選擇。當然，具體實現不 是那麼容易，需要一定的css功力和實踐經驗。本文不講細節，只講外部的自適應架構，這也是實現整個頁面自適應的前提。目前為止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個 絕對...

三種三欄網頁寬度自適應布局方法

1 絕對定位法 這或許是三種方法裡最直觀，最容易理解的 左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。css 如下 為截圖 html 為 這裡的左中右三個div的順序是可以任意調整的，這與剩下的兩中方法就不一樣了，需要注意一下。此...

左中右三欄網頁寬度自適應布局方法

三種方法 絕對定位 margin負值 自身浮動。簡潔實用，無相容問題。第一種 絕對定位 demo div標籤的順序隨意，在css裡都有位置設定，接下來的兩個方法對順序有要求。如果中間欄或內部元素設定了寬度，瀏覽器寬度過小的情況下會出現重疊。第二種 margin負值 demo 較難理解，有一定抗性 布...