今天早上看到群里有人提了这样一个需求
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 后的部分来存放填充内容，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
这种方法大致还是能够实现的，跟双飞翼还是圣杯？实现原理差不多
后来看到有人提到了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
实现的结果跟上面那种一样，不过少了不少步骤，关键的点是calc，计算width的值
calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”、“-”、“” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算;
表达式中有'+'和“-”时，其前后必须要有空格!!!!!!!，如"widht: calc(12%+5em)"这种没有空格的写法是错误的
表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。
浏览器的兼容性
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符.
