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挨约、左邊f(xié)loat，觸發(fā)父元素寬度計算?
html結(jié)構(gòu)同上
.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">中文網(wǎng)</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：這個方法完美之處還在于，垂直方向也自動填充时甚，輕松實現(xiàn)了等高布局０住！
html同第一個demo
.parent{display:flex;background:#ddd}
.l-child{flex:00100px;background:#bbb}
.r-child{background:#999}
