html自适应分栏,六种自适应两栏布局方式

html结构

方法一：flex布局.wrapper{

display:flex;

}

.left{

width:200px;

height:400px;

background:black;

}

.right{

flex:1;

height:400px;

background:red;

}

方法二：浮动.left{

float:left;

width:200px;

height:400px;

background:black;

}

.right{

background:red;

height:400px;

}

方法三：BFC.left{

width:200px;

height:400px;

float:left;

background:black;

}

.right{

overflow:hidden;

height:400px;

background:red;

}

方法四：position绝对定位.wrapper{

position:relative;

}

.left{

width:200px;

height:400px;

background:black;

}

.right{

position:absolute;

top:0;

left:200px;

right:0;

bottom:0;

background:red;

}

方法五：table布局.wrapper{

display:table;

width:100%;

}

.left,.right{

display:table-cell;

height:400px

}

.left{

background:black;

}

.right{

background:red;

}

方法六：grid布局.wrapper{

display:grid;

width:100%;

height:400px;

grid-template-columns:200px auto;

}

.left{

background:black;

}

.right{

background:red;

}