html - 动态但受限的元素宽度？

Question

http://jsbin.com/upohag/1/edit

蓝色 div 应该占据绿色和紫色 div 之间的空间。我不知道绿色 div 的宽度，但是随着它变大，蓝色的宽度应该变小。

编辑:我想在没有表格或 javascript 的情况下执行此操作。

在此处的示例中(有表格，但仅用于演示我的意思):http://jsbin.com/upohag/2/edit ，蓝色矩形紧贴在其他两个之间。但是，一个问题是左边的矩形没有占据它需要的所有空间。左边的矩形应该能够完全展开。

Answer 1

您可以使用 display: table-cell 来获得正确的自动调整大小行为:

.left{
  display:table-cell;
} 
.center{
  display:table-cell;
}
.right{
  display:table-cell;
  width: 200px;
}

演示:http://jsbin.com/upohag/12/edit