今天早上看到群里有人提了这样一个需求

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+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符.