純css實現三欄式布局

2021-07-29 16:24:50 字數 1569 閱讀 2818

1.相對定位+float+margin負值（聖杯布局）

id="parent_rela">

id="center_rela">我是中間div>

id = "left_rela">我是左邊div>

id = "right_rela">我是右邊div>

div>

#parent_rela


#left_rela,#right_rela


#left_rela


#right_rela


#center_rela
先給外層padding留出兩側的空間

2.絕對定位

id="parent_abso">

id = "left">我是左邊div>

id = "right">我是右邊div>

id = "center">我是中間div>

div>

#parent_abso


#left,#right


#left


#right


#center
3.自身浮動定位法

id = "left_self">我是左邊div>

id = "right_self">我是右邊div>

id = "center_self">我是中間div> 

#left_self,#right_self


#left_self


#right_self


#center_self
4.flex布局

id="parent">

id="center_flex">我是中間div>

id="left_flex">我是左邊div>

id="right_flex">我是右邊div>

div>

#left_flex,#right_flex


#right_flex


#parent


#center_flex
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0

5.margin負值法（雙飛翼布局）

id = "wrap">

id = "center">我是中間div>

div>

id = "left_margin">我是左邊div>

id = "right_margin">我是右邊div>

#wrap


#wrap


#center


#left_margin,#right_margin


#left_margin


#right_margin
效果圖：

CSS三欄式布局

以下兩種方式分別用float和position absolute 實現，中間的自適應寬度都是用margin實現的，事實證明margin真的很方便！方法1 position container left,right left content right 這種方式存在的乙個問題 container的高度...

三欄式布局

通常來說，三欄式最基本要解決的是左右兩側固定寬度，中間列自適應寬度，另外根據瀏覽器從上至下的渲染原理，通常中間欄才是最主要的內容，最好能在dom結構上將中間欄放在更前面 中間欄需要自適應寬度，自然想到塊級元素特性，但正因為這種獨佔一行的特性，只能將左右提前並且兩邊浮動，而中放最後做自適應寬度 另外就...

三欄式布局

真是坑壞我了.就因為html裡left,right,center的位置一直出錯 應該是left,right,center我寫成了left,center，right 團隊名稱 課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去...