html部分
<body>
<div id="box">
<div id="left" style="background:pink;"></div>
<div id="right" style="background:#ccc;"></div>
</div>
</body>
方法一：
父级 display：flex
子级 flex：1
子级 width：200px 固定宽
<style type="text/css">
#box{
width:100%;
display: flex;
height:200px;
}
#left{
width:200px;
height:100%;
}
#right{
flex:1;
height:100%;
}
</style>
方法二：
子级浮动
calc(100% - 300px)运算
<style>
#box{
width:100%;
height:300px;
}
#left{
width:200px;
height:100%;
float:left;
}
#right{
width:calc(100% - 300px);
height:100%;
float:right;
}
</style>
方法三：
固定宽子级浮动
自适应子级宽100%，及margin-left值
<style>
#box{
width:100%;
height:300px;
}
#left{
width:300px;
height:100%;
float:left;
}
#right{
width:100%；
height:100%;
margin-left:300px;
}
</style>
</style>
网友评论