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

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