html - 两个固定宽度 div 之间的 div 内的 linbreak 文本

Question

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

如何告诉橙色 div 对其文本/内容进行换行，以使黄色 div 不换行？

div green 和 div yellow 必须有固定的宽度。它们之间的 div 应该有 width:auto ，这意味着 div 随内容增长并随内容中断。

我只做 IE9+ 和最新的 Chrome/FF

Answer 1

Set its width with CSS calc().

Demo

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

Browser support for calc()

Answer 2

absolute@Itay 的答案很棒，但出于兼容性原因，我建议您使用position 。对于前端开发者来说，兼容性就是一切。

.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%;
}

演示

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 */
}

更新的 CODEPEN