自适应布局/等分布局/九宫格布局是面试常考的内容，通常要求掌握几种实现方法，以下是我自己准备秋招总结的布局，方便记忆及应付面试基本足够~
左固右自适应布局
1 左边div定宽+左浮动，右边div用margin-left等于左边div宽度实现
.left{
width:100px;
float:left;
border:1px solid red;
min-height:500px;
}
.right{
margin-left:100px;
border:1px solid blue;
min-height:500px;
}
（顺序不能换）
2 左边div定宽+绝对定位，右边div用margin-left等于左边div宽度实现
.left{
position: absolute;
left: 0;
top: 0;
width:100px;
border:1px solid red;
min-height:200px;
}
.right{
margin-left: 100px;
border:1px solid blue;
min-height:200px;
}
（顺序可互换）
3 弹性布局,IE10以下不兼容
body{
display: flex
}
.left{
flex:0 0 100px;
border:1px solid red;
min-height:500px;
}
.right{
flex: 1;
border:1px solid blue;
min-height:500px;
}
（顺序不能换）
右固左自适应布局
1 右边div定宽+右浮动，左边margin-right等于右边div宽度
.right{
width:100px;
float:right;
border:1px solid red;
min-height:500px;
}
.left{
margin-right:100px;
border:1px solid blue;
min-height:500px;
}
（顺序不能换）
2 右边div定宽+绝对定位，左边margin-right等于右边div宽度
right{
width:100px;
position：absolute；
top:0;
right：0；
border:1px solid red;
min-height:500px;
}
.left{
margin-right:100px;
border:1px solid blue;
min-height:500px;
}
（顺序可互换）
3 弹性布局
body{
display: flex
}
.left{
flex: 1;
width: 100px;
border:1px solid red;
min-height:500px;
}
.right{
flex:0 0 100px;
border:1px solid blue;
min-height:500px;
}
1233333（顺序不要换）
左固右固中间自适应布局
1 左边div定宽+左浮动，右边div定宽+右浮动，中间div左边距等于左边div宽度，右边距为右边div宽度、
.left{
float: left;
width:100px;
border:1px solid blue;
min-height:500px;
}
.middle{
border:1px solid blue;
min-height:500px;
margin:0 100px 0 100px;
}
.right{
width:100px;
float: right;
border:1px solid red;
min-height:500px;
}
（浮动元素放在前面）
2 左边div绝对定位+左浮动，右边div绝对定位+右浮动，中间div左边距等于左边div宽度，右边距为右边div宽度
.left{
position:absolute;
width:100px;
left:0px;top:0px;
border:1px solid blue;
min-height:500px;
}
.middle{
border:1px solid blue;
min-height:500px;
margin:0 100px 0 100px;
}
.right{
width:100px;
position:absolute;
right:0px;
top:0px;
border:1px solid red;
min-height:500px;
}
（顺序可调）
3 弹性布局
body{
display: flex;
}
.left{
flex: 0 0 100px;
border:1px solid blue;
min-height:500px;
}
.middle{
flex: 1;
border:1px solid blue;
min-height:500px;
}
.right{
flex: 0 0 100px;
float: right;
border:1px solid red;
min-height:500px;
}
（顺序不能换）
等分布局
1 width+box-sizing+float
.left{
float: left;
width: 33.3%;
box-sizing: border-box;
border:1px solid blue;
min-height:500px;
}
.middle{
float: left;
width: 33.3%;
box-sizing: border-box;
border:1px solid blue;
min-height:500px;
}
.right{
float: left;
width: 33.3%;
box-sizing: border-box;
border:1px solid red;
min-height:500px;
}
2 弹性布局
body{
display: flex;
}
.left{
flex: 1;
border:1px solid blue;
min-height:500px;
}
.middle{
flex: 1;
border:1px solid blue;
min-height:500px;
}
.right{
flex: 1;
float: right;
border:1px solid red;
min-height:500px;
}
九宫格
1 同等分布局方法1，float-left+box-sizing+width:33.3%
2 同等分布局方法2，每一行都为一个等分布局
.lottery-draw-container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 300px;
border: 1px solid #000;
display: flex;
flex-direction: column;
}
.item{
flex: 1;
display: flex;
justify-content:center;
align-items: center;
border: 1px solid #000;
}
.active{
background-color: red;
}
一等奖
二等奖
三等奖
四等奖
开始
五等奖
六等奖
七等奖
八等奖