看了很多这相关的文章,做一个总结,囊括了大部分的主流方法。
html片段如下:
<div id="wrap">
<div id="lt">ddddddddddddddddd</div>
<div id="rt">vvvvvvvvvvvvvv</div>
</div>
1.左边浮动,右边margin-left
右边的margin-left为左边width的值
#lt{ width:200px; float:left;background: #ff0;}
#rt{margin-left:200px;background: #f00;}
2.左边定位,右边同样margin-left
右边的margin-left为左边width的值
#wrap{ position:relative;}
#lt{ width:200px;position:absolute;left:0;top:0;background: #ff0;}
#rt{margin-left:200px;background: #f00;}
3.用BFC方法,左边浮动,右边设置overflow:hidden,成为一个BFC区域
#lt{ width:200px;float:left;background: #ff0;}
#rt{overflow:hidden;background: #f00;}
4.flex弹性布局,左边固定宽度,右边填满
#wrap{ display:flex;flex-flow: row}
#lt{ width:200px;background: #ff0;}
#rt{flex:1;background: #f00;}