css - 如何使跨度将可用空间延伸到其他跨度？

Question

我想创建一个由 div 中的三个 span 组成的元素。三个跨度应使用 div 提供的整个宽度。左右跨度具有固定的宽度，中间的跨度应该使用它们之间的整个可用空间。我一直在尝试许多不同的东西（浮动、溢出等），但我还没有找到答案，而且我的想法已经不多了......

代码相当简单：

<div class="row">
  <span class="rowLeft">LEFT</span>
  <span class="rowCentre">CENTER</span>
  <span class="rowRight">RIGHT</span>
</div>

使用以下 CSS：

.row {
  display: block;
  height: 62px;
  border: 1px dotted black;
}
.rowLeft {
  float: left;
  width: 40px;
  height: 60px;
  border: 1px solid red;
}
.rowCentre {
  float: left;
  height: 60px;
  border: 1px dashed blue;
}
.rowRight {
  float: right;
  width: 60px;
  height: 60px;
  border: 1px solid green;
}

我为此创建了一个 jsFiddle：http: //jsfiddle.net/ezAdf/

问题：从这里开始，如何使中心跨度拉伸左右跨度之间的可用空间？

Answer 1

您可以display:table-cell在每个跨度上使用 CSS 属性，然后将中心跨度上的宽度设置为 100%。

jsFiddle 示例

.row {
  display: block;
  height: 100px;
  border: 1px dotted black;
}
.rowLeft {
  width: 40px;
  height: 60px;
  border: 1px solid red;
  display:table-cell;
}
.rowCentre {
  height: 60px;
  border: 1px dashed blue;
  display:table-cell;
  width:100%;

}
.rowRight {
  width: 60px;
  height: 60px;
  border: 1px solid green;
  display:table-cell;
}

Answer 2

有点像@j08691 的解决方案，有一些变化。（虽然可以在 4 个浏览器中使用。）我删除了浮动，添加display: table-cell到span和display: tablepluswidth: 100%到.row

在这里工作小提琴。

Answer 3

只需对您的 CSS 文件进行以下更改：

.row {
  display: block;
  height: 62px;
  border: 1px dotted black;   
  position: relative;
}

.rowLeft {
  width: 40px;
  height: 60px;
  border: 1px solid red; 
  float: left;
}

.rowCentre{
  position: absolute;
  left: 40px;
  right: 60px;
  height: 60px;
  border: 1px dashed blue;  
  float: left;
}

.rowRight{
  width: 60px;
  height: 60px;
  border: 1px solid green;  
  float: right;
}