兩欄佈局三種方法(親測有效)

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