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

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

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

div


#aside


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

.cont


.left


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

.max


.left


.right