將右浮動元素保留在與塊相同的行上

Question

我有兩個寬度未知的元素，一個浮動到左側，一個向右浮動。在他們之間，我有一個塊擴展到適合容器寬度。

我想要實現的佈局是這樣的：

+---------------------------------------------+ 
| [Left] [Expanded     ] [Right] | 
+---------------------------------------------+ 

但右浮動元素被清除到下一行：

+---------------------------------------------+ 
| [Left] [Expanded       ] | 
|          [Right] | 
+---------------------------------------------+ 

如果這些元素的順序，它工作正常在HTML中：左，右，擴展。 但要更多的語義，我需要這個順序：左，擴展，右。

看到這個jsFiddle。

可能嗎？即使需要包裝...

Answer 1

您使用display: table可以做到這一點：http://jsfiddle.net/thirtydot/GpL5A/3/

HTML：

<div class="expandoooo"> 
    <span class="left">Left</span> 
    <span class="expanded">Expanded</span> 
    <span class="right">Right</span> 
</div>​ 

CSS：

.expandoooo { 
    background-color: lightgray; 
    display: table; 
} 
.expandoooo > span { 
    display: table-cell; 
} 

.left { 
    color: red; 
} 
.expanded { 
    background-color: black; 
    color: white; 
    width: 100%; 
} 
.right { 
    color: blue; 
} 

的小缺點這個技術就是那個臨死的瀏覽器IE7 does not support display: table，雖然有JavaScript fix。

Answer 2

如果您僅限於使用浮動，則需要確保.left和.expanded都左移。您可能也想使用最大寬度來防止向下推。

.left, .expanded { 
    float: left; 
}