如果有以下的需求,目前能想到的的方案有两种,一种是利用BFC原理,另一种是flex布局

blob.png

  • BFC

<div class="wrap">
	<div class="left">left</div>
	<div class="right">right</div>
</div>
.wrap{
width:100%
}
.left{
	width:100px;
	background:red;
	float:left;
}
.right{
	background:blue;
}

预览地址:http://runjs.cn/detail/ks1azrdc

  • flex布局

<div class="wrap">
	<div class="left">left</div>
	<div class="right">right</div>
</div>
.wrap{
	display:flex;
	justfy-conten:space-between;
}
.left{
	height:30xp;
	width:100px;
	background:red;
}
.right{
	height:30px;
	background:blue;
	width:100%;
}

预览地址:http://runjs.cn/detail/3ojtyyfu