1、左position:absolute, 右margin-left
<div class="parent">
<div class="l-child"></div>
<div class="r-child"></div>
</div>
//父元素相对定位，作为子元素绝对定位的参考
.parent{display:relative;background:#ddd}
.l-child{position:absolute;width:100px;background:#bbb}
.r-child{margin-left:100px;background:#999}
2、左边float，触发父元素宽度计算
html结构同上
.parent{background:#ddd;overflow:hidden; }
.l-child{float:left;width:100px;background:#bbb;z-index:10000; }
.r-child{margin-left:100px;background:#999;}
3、左右浮动，右边使用负边距
<div class="parent">
<div class="l-box"></div>
<div class="r-box">
<div class="r-content">中文</div>
</div>
<div class="l-box">中文网</div>
<./div>
.parent{background:#ddd;overflow:hidden; }
.l-box{float:left;width:100px;background:#bbb;}
.r-box{float:right;width:100%;margin-left:-100px;background:#999;}
.r-content{margin-left:100px;}
4、flex布局
父元素flex布局后，子元素默认就是弹性布局，除非你确定子元素的弹性方式
ps：这个方法完美之处还在于，垂直方向也自动填充，轻松实现了等高布局！！
html同第一个demo
.parent{display:flex;background:#ddd}
.l-child{flex:00100px;background:#bbb}
.r-child{background:#999}
