css常用布局 兩欄 三欄 布局

2021-10-23 22:20:34 字數 2384 閱讀 4210

我們在做pc端頁面的時候、經常會用到這種布局、即兩欄、 三欄布局。

如圖所示：

這兩種經典布局相信很多人都用過把。

現在分享一下我的布局方案吧（每個人布局風格不同 自然想法就不一樣了。）

側邊使用 float：left屬性 中間盒子自動尾隨 其後設定margin-left：200px 實現對齊。

2、使用 絕對定位：

.left

.right

3、flex布局：

2、浮動定位法

<


!--左右側欄的位置可以更改--


>


"left"


>


<


/div>


"right"


>


<


/div>


<


!--中間欄放最後--


>


"main"


>


<


/div>


#left


#right


#main
3、flex布局：

給父元素設定display：flex；子元素設定對應的寬高。

4、浮動+margin（負值）：

div


.middle


.left


.right
5、聖杯布局：

.container 


.left,


.middle,


.right 


.left 


.right 


.middle
前面的實現都一樣，三欄都向左浮動，center的寬度為100%，left的margin-left為-100%，right的margin-left為其自身寬度的負值。

但此時左右邊欄實際上是在center上方的，會遮蓋center內容。

此時為container設定乙個左右的padding，分別為left和right的寬度。此時整體都是向中間壓縮的：

然後對left與right使用position:relative，使其相對現在的位置分別向左、向右移動，從而佔據container利用padding空出來的位置。

6、雙飛翼布局：

"main"


>


="content"


>


<


/div>


(content包含在main中)


<


/div>


"left"


>


<


/div>


"right"


>


<


/div>


<


/body>


#main 


.content 


#left


#right用main將content包起來，然後浮動，content利用margin向兩邊空出距離，讓左右元素進來。左右元素都是左浮動.


當乙個元素margin-left：的距離等於他自身的距離的負值時，他就會移動到上一層，right塊元素就會移動到main的最右邊.


當乙個元素margin-left:的距離等於負100%(也就是body的長度)，他就會移動到上一層的最左邊。

CSS實現 兩欄布局，三欄布局

aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...

CSS布局 兩欄布局

題外話 心情不好想虐虐自己。兩欄布局要求說明 左側固定寬度，右側自適應大小 html文件結構如下 這是左邊 這是右邊 實現效果 方法如下 方法一 float。left將元素的float屬性設定為left body left right margin 0 padding 0 height 100 ba...

三欄布局與兩欄布局

html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...