关于css常见4种左边固定，右边自适应的布局

在我们开发或者面试中常常听到面试官问到这个问题，那么小伙伴们如何解答呢？

html代码：

  <div class='aside'></div>

<div class='content'></div>

一，通过margin来设置：

css代码：

. aside {

width : 210 px ;

height : 400 px ;

background-color : forestgreen ;

float : left ;

}

. content {

height : 400 px ;

margin-left : 210 px ;

background-color : orange ;

}

二：通过触发btc实现

css代码：

.aside{

width: 200px;

height: 200px;

background-color: red;

float: left;

}

.content{

overflow: hidden;

height: 200px;

background-color: blue

三：通过flex布局：

这里不详细叙述，关于flex布局可以参见阮一峰的flex布局教程:flex布局教程

四：通过display:table-cell实现

css代码：

aside {

width : 200 px ;

height : 200 px ;

float : left ;

background-color : red ;

}

. content {

display : table-cell ;

width : 3000 px ;

height : 200 px ;

background-color : blue ;

}