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

2022-04-12 09:21:34 字數 361 閱讀 2127

三種方法:絕對定位、margin負值、自身浮動。**簡潔實用,無相容問題。

第一種:絕對定位

demo

div標籤的順序隨意,在css裡都有位置設定,接下來的兩個方法對順序有要求。

如果中間欄或內部元素設定了寬度,瀏覽器寬度過小的情況下會出現重疊。

第二種:margin負值

demo

**較難理解,有一定抗性——布局不易受內部影響,但一旦出現bug不易排查。

第三種:自身浮動

demo

**簡潔高效,但因為使用的浮動屬性,所以中間欄要避免使用clear:both

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

一 絕對定位法 html片段如下 left main right css片段如下 html,body left,right left main right 思路 左右兩欄採用絕對定位,分別固定於頁面的左右兩側,中間的主體欄用左右margin值撐開距離。二 雙飛翼布局 main left right ...

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

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

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

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