<div class="left"></div>
<div class="right"></div>
1>left浮动,设置宽度,右边用margin-left留给left位置其自适应
body{
margin:0;
padding:0;
}
.left{
float:left;
width:200px;
height:300px;
background:blue;
}
.right{
margin-left:200px;
height:300px;
background:red;
}
2>left绝对定位设置position:absolute,right设置margin-left给left留下位置其自适应
body{
margin:0;
padding:0;
}
.left{
position:absolute;left:0;top:0;
width:200px;
height:300px;
background:blue;
}
.right{
margin-left:200px;
height:300px;
background:red;
}
3>Left浮动,right触发bfc设置overflow:hidden不设置宽度
body{
margin:0;
padding:0;
}
.left{
float:left;
width:200px;
height:300px;
background:blue;
}
.right{
overflow:hidden;
height:300px;
background:red;
}
4>弹性盒模型,left设置flex:0 0 宽度,right设置flex:1 1
<div class="contain">
<div class="left"></div>
<div class="right"></div>
</div>
body{
margin:0;
padding:0;
}
.contain{
display:flex;
display:-webkit-flex;
height:300px;
}
.left{
flex:0 0 200px;
background:blue;
}
.right{
flex:1 1;
background:red;
}