要求:
- 左侧:宽度固定150px,高度自动撑开,和右侧同高
- 右侧:宽度自适应,高度自动撑开,和左侧同高
1.flex方法
HTML部分
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS部分
.container {
display:flex
}
.left {
width:150px;
background: #000;
}
.right {
flex:1;
background: red;
}
2. float+margin方法
.left {
width: 100px;
background: #ccc;
float: left;
}
.right {
background: #390;
margin-left: 100px;
}
3. float + calc方法
.left {
width: 100px;
background: #ccc;
float: left;
}
.right {
background: #362;
width: calc(100% - 100px);
float: left;
}