两个固定宽度div之间的div内的换行文本

Question

我的笔：http://codepen.io/helloworld/pen/vzuLC

如何告诉橙色div将其文本/内容换行，以便黄色div不会换行？

div green和div yellow必须有固定的宽度。它们之间的div应该有宽度：auto意味着div随着内容的增长而中断并与内容分开。

我只使用IE9 +和最新的Chrome / FF

Answer 1

使用CSS calc()设置宽度。

Demo

#address{
  width: calc(100% - 100px); 
}

Browser support for calc()

Answer 2

@Itay的答案很棒，但出于兼容性原因，我建议您使用absolute位置。对于前端开发人员而言，兼容性就是一切。

.wrapper{ 
  position: relative;
  border-top:white solid 1px;  
  border-bottom:#ddd solid 1px;
}

#alarmNumber{
  position: absolute;
  left:0;
  width:50px;
  background:lightgreen;
}
#address{
  float:left;
  margin: 0 50px;
}
#expander{
  position:absolute;
  right:0;
  background:yellow;
  text-align:center;
  width:50px; 
  height:100%;
}

DEMO

Answer 3

您可以使用position:absolute和box-sizing

执行此操作

#alarmNumber{
  float:left;
  width:50px;
  background:lightgreen;
  position:relative; /* add this */
  z-index:1; /* add this so that it appears on top of address */
}
#address{ 
  width:100%; 
  padding: 0 50px; /* add this */
  position:absolute; /* add this */
  -moz-box-sizing: border-box;
  box-sizing: border-box; /* add this */
}

<强> UPDATED CODEPEN