今天早上看到群里有人提了這樣一個需求
1.jpg
一個div中有2個子div，其中左邊的div寬度固定配乓，同時右邊div寬度填充所有余下部分。
<div class="parent">
<div class="image">img</div>
<div class="d1">
<p>fdskfldsjfskl</p>
</div>
</div>
我自己的想法是惠毁，父div padding-left 后的部分來存放填充內(nèi)容犹芹，padding的空間來存放img
.parent{
width:200px;
height:50px;
background:white;
padding-left:50px;
box-sizing:border-box;
position:relative;
text-align:center;
line-height:50px;
}
.d1{
background:red;
height:50px;
}
.image{
position:absolute;
margin-left:-50px;
width:50px;
}
2.png
這種方法大致還是能夠?qū)崿F(xiàn)的，跟雙飛翼還是圣杯鞠绰？實現(xiàn)原理差不多
后來看到有人提到了width:scal這個方法 腰埂，第一次見 所以特地試了一下
.parent{
width:200px;
height:50px;
background:white;
position:relative;
line-height:50px;
}
.img{
background:yellow;
width:40px;
height:50px;
float:left;
}
.d1{
background:red;
height:50px;
float:left;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
3.png
實現(xiàn)的結(jié)果跟上面那種一樣，不過少了不少步驟蜈膨，關(guān)鍵的點是calc屿笼，計算width的值
calc()的運算規(guī)則
calc()使用通用的數(shù)學運算規(guī)則牺荠，但是也提供更智能的功能：
使用“+”、“-”驴一、“” 和 “/”四則運算休雌；
可以使用百分比、px肝断、em杈曲、rem等單位；
可以混合使用各種單位進行計算;
表達式中有'+'和“-”時胸懈，其前后必須要有空格!!!!!!!担扑，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的
表達式中有“”和“/”時，其前后可以沒有空格趣钱，但建議留有空格涌献。
瀏覽器的兼容性
瀏覽器對calc()的兼容性還算不錯，在IE9+首有、FF4.0+燕垃、Chrome19+、Safari6+都得到較好支持绞灼，同樣需要在其前面加上各瀏覽器廠商的識別符.
