如何使跨度拉伸到其他跨度之间的可用空间？

Question

我想创建一个元素，它包含一个div内的三个跨度。三个跨度应使用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/

问题：启动FR在这里，我怎样才能使中心跨度拉伸左右跨度之间的可用空间？

Answer 1

有点像@ j08691的解决方案，有了一些变化。 （工程4个浏览器虽然）。 我删除了花车，添加display: table-cell到跨度和display: table加width: 100%到.row

工作小提琴here。

Answer 2

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

jsFiddle example

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