移动端：左侧固定，右侧自适应

今天我们来总结一下移动端：左侧固定，右侧自适应布局的方法。
我们首先来看一下效果图。

接下来我们来分析实现移动端的四种方法。

• 方法一：浮动布局

#aside{
float:left;
width:200px;
background-color: #f30;
}
#content{
margin-left:200px;
background-color: #0f0;
}

知识点
1.先让固定宽度的DIV浮动，使其脱离文档流
2.margin-left的值与固定DIV的宽度相等

• 方法二：margin负值

#aside {
float: left;
margin-right: -200px;
width: 200px;
background-color: #f30;
}
#content {
float: right;
}

#content #inner {
margin-left: 200px;
background-color: #0f0;
}

知识点
1.使固定宽度的DIV脱离文档流
2.利用margin负值，可以使得后面的DIV与前面的DIV保持同行显示

• 方法三：calc()计算属性

#aside {
float: left;
width: 200px;
background-color: #f30;
}
#content {
float: right;
width: calc(100% - 200px);
background-color: #0f0;
}

知识点
1.使用calc计算属性的时候 运算符(- + 等等) 两边必须有空格
2.注意两个DIV必须一左一右浮动
3.calc的宽度必须要与固定宽度保持一致
4.此方法慎用，兼容性不强

• 方法四：flex

body {
display: flex;
}

#aside {
flex: 0 0 200px;
background-color: #f30;
}

#content {
/* 等比例缩小 */
flex: 1;
background-color: #0f0;
}

知识点
1.需要给父级DIV设置display:flex属性
2.固定宽度的DIV设置flex:0 0 200px即可
3.内容区域的DIV直接写flex:1即可

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

• 点赞
• 收藏
• 分享
• 文章举报