css常用布局 兩欄 三欄 布局

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

如圖所示：

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

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

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

.left

.right

3、flex布局：

2、浮動定位法

<

!--左右側欄的位置可以更改--
>
"left"
>
<
/div>
"right"
>
<
/div>
<
!--中間欄放最後--
>
"main"
>
<
/div>
#left
#right
#main

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

div

.middle
.left
.right

.container 

.left,
.middle,
.right 
.left 
.right 
.middle 

但此時左右邊欄實際上是在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...