兩欄布局三種方法（親測有效）

2022-06-23 16:51:10 字數 471 閱讀 5062

只需要兩個div就能實現，主要原理是將第乙個div設為浮動，並加上寬度，然後就可以實現兩欄布局，並不需要設定第二個div的任何東西。**如下：

div


#aside


#main
需要三個div，乙個做為父元素，兩個座位子元素，將父元素設為相對定位，兩個子元素設為絕對定位，然後將上邊的子元素設定寬度，將下邊的子元素設定left為上子元素的寬度值。right設定為0；就嫩實現啦，**如下：

.cont


.left


.right
使用彈性盒模型。三個div，父元素設定為display:flex;,上子元素為flex:3；或者設定固定寬度，下子元素為flex:7或者1；**如下：

.max


.left


.right

三種方法實現CSS三欄布局

本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 doctype html en utf 8 css實現三欄布局1 title text css body left middle ri...

三種方法實現CSS三欄布局

本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 lang en charset utf 8 css實現三欄布局1title type text css body left middl...

三種方法實現CSS三欄布局

本文由雲 社群發表本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 左欄 右欄中間欄 注意 該方法在html布局時，要把中間欄放在左欄 右欄後面，左欄和右欄的順序不定實現的效果如下 實現方法 兩邊兩欄寬度...