三欄布局在網頁布局中算是 比較長江的一種，比如**等，諸多**都是用的三欄布局
它是 兩邊元素固定，中間自適應，並且 中間的元素優先渲染
第一種：定位
也是比較粗暴的一種定位但本人不建議使用 布局容易混亂
結構
class
="container"
>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
class
="main"
>
maindiv
>
div>
body,html
/*左邊欄左浮動*/
.left
/*中間欄自適應*/
.main
/*右邊欄右浮動*/
.right
簡單，相容性好
當中間內容高於兩側時，兩側高度不會隨中間內容變高而變高
結構與上一種方式結構一樣 （同上）
下面我就不寫了
.container
.left
.main
.right
簡單、優雅
未來發展趨勢，實用
三欄高度統一
class
="container"
>
class
="left"
>
leftdiv
>
class
="main"
>
centerdiv
>
class
="right"
>
rightdiv
>
div>
.container
.container>div
.left
.main
.right
>
class
="wrap"
>
class
="main"
>
兩邊元素固定，中間自適應，並且 中間的元素優先渲染div
>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
body
>
>
.wrap
.main, .left, .right
.main
.left
.right
style
>
重點：負邊距
當我們給元素加上相反的負邊距的時候，它會認為它前面的元素的寬度減少了這麼多，而實際上前者的寬度並沒有改變，最終的效果為：加負邊距的元素浮在了它前面元素的上方
>
class
="wrap"
>
class
="main"
>
class
="content"
>
兩邊元素固定，中間自適應，並且 中間的元素優先渲染
div>
div>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
body
>
>
.main, .left, .right
.main
.main .content
.left
.right
style
>
三欄網頁寬度自適應布局方法
一 絕對定位法 html片段如下 left main right css片段如下 html,body left,right left main right 思路 左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。二 雙飛翼布局 main left right ...
css常用布局 兩欄 三欄 布局
我們在做pc端頁面的時候 經常會用到這種布局 即兩欄 三欄布局。如圖所示 這兩種經典布局相信很多人都用過把。現在分享一下我的布局方案吧 每個人布局風格不同 自然想法就不一樣了。側邊使用 float left屬性 中間盒子自動尾隨 其後設定margin left 200px 實現對齊。2 使用 絕對定...
CSS floats建立三欄網頁布局
三欄布局是目前最常見的網頁布局，主要頁內容放在中間一欄，邊上的兩欄放置導航鏈結之類的內容。基本布局一般是標題之下放置三欄，三欄佔據整個頁面的寬度，最後在頁的底端放置頁尾，頁尾也佔據整個頁面寬度。絕大多數網頁設計者都熟悉傳統的網頁設計技術，用這些技術可以生成帶有 建立固定寬度布局或者 液態 它可以根據...