今天面试的时候碰到这类题，大概是实现两列布局，左边固定宽度100px,右边自适应，我只写了一个float和flex布局方法，感觉不够完善。现在整理一下实现这种页面布局的几种方法，供大家学习参考，也希望同学们面试碰到类似题能得心应手。
总结了一下，目前是五种方法：float布局、定位布局、flex布局、表格布局、网格布局。
<
div
class=
"wrapper">
<!--因为浮动和定位布局会影响布局，这里我们把center写在下面，这里需要特别注意-->
<
div
class=
"left"></
div>
<
div
class=
"right"></
div>
<
div
class=
"center">
<
p>自适应部分</
p>
</
div>
</
div>
样式：
* {
.wrapper
{ .wrapper>div {
margin:
0;
width
:
100
%
; height: 100px;
padding:
0;
height
:
100
px
; }
}
font-size
:
32
px
;
}
1.float布局:这没什么好说的，给左边设置float：left,右边设置float:right,即可；
2.定位布局：
(为减少篇幅，就只写主要代码了。300px是我们给两边设置的固定宽度)
.wrapper
>div { //给左中右均设置为绝对定位，给左边设置left：0；中间设置left：300px,right:300px;右边设置right:0即可；
height:
100
px;
position:
absolute;
}
4.flex布局：(flex布局为css3所有，注意ie的兼容性)
//html部分左中右调整回正常顺序
<
div
class=
"wrapper"> //这里给wrapper设置display:flex;
<
div
class=
"left"></
div>
<
div
class=
"center"> //给center设置flex:1，即可；
//这代表flex:1 1 auto;对flex不熟悉的推荐阮一峰博客flex布局教程：
<
p>自适应部分</
p>
</
div>
<
div
class=
"right"></
div>
</
div>
5.网格（Grid）布局:
.wrapper{
display：grid;
grid-template-rows：100px （横向高度均为100px）；
grid-templater-column:300px auto 300px (纵向3列设置为宽度分别为300px 自适应 300px )
}