**
左边固定右边自适应
**
效果图如下:
html布局代码如下:
<div class="left"></div>
<div class="main"></div>
样式如下:
- 方法一:浮动法
.left{
width: 200px;
height: 400px;
float: left;
background-color:red;
}
.main{
height: 400px;
margin-left: 0 200px;
background-color:yellow;
}
- 方法二:绝对定位法
.left{
width: 200px;
height: 400px;
background-color:red;
position: absolute;
}
.main{
height: 400px;
position: absolute;
left: 200px;
background-color:yellow;
}
- 方法三:flex布局
body{
display: flex;
}
.left{
width: 200px;
height: 400px;
background-color:red;
}
/* 设置flex为1,占位等于父元素-其他子元素 */
.main{
height: 400px;
background-color:yellow;
flex:1
}