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

2021-10-23 22:10:16 字數 1442 閱讀 4557

"aside"


>


<


/div>


"main"


>


<


/div>


div#aside


#main
左側欄固定寬度向左浮動，右側主要內容則用margin-left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。

右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin-right空出其寬度即可。

"aside"


>


<


/div>


"main"


>


<


/div>


#aside


#main


"container"


>


"aside"


>


<


/div>


"main"


>


<


/div>


<


/div>


#container


#aside


#main
左側欄和右側欄分別用絕對定位固定在左側和右側，中間欄則利用margin-left和margin-right空出左右欄位置來：

"left"


>


<


/div>


"main"


>


<


/div>


"right"


>


<


/div>


html,body


div#left


#main


#right
這裡的三個div的位置可以隨意調整。此種方法最簡單，分別另左側欄和右側欄向左和向右浮動，中間欄放在最後，再利用左右外邊距空出左右欄的位置即可。

<


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


>


"left"


>


<


/div>


"right"


>


<


/div>


<


!--中間欄放最後--


>


"main"


>


<


/div>


*#left


#right


#main

css常用布局 兩欄 三欄 布局

我們在做pc端頁面的時候 經常會用到這種布局 即兩欄 三欄布局。如圖所示 這兩種經典布局相信很多人都用過把。現在分享一下我的布局方案吧 每個人布局風格不同 自然想法就不一樣了。側邊使用 float left屬性 中間盒子自動尾隨 其後設定margin left 200px 實現對齊。2 使用 絕對定...

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...