css - 保持右浮动元素与 block 在同一行

Question

我有两个宽度未知的元素，一个向左浮动，一个向右浮动。在它们之间我有一个扩展 block 以适应容器宽度。

我想要实现的布局是这样的:

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

但是右浮动的元素被清除到下一行:

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

如果元素在 HTML 中按以下顺序排列，则效果很好:左、右、展开。但是为了更加语义化，我需要这样的顺序:Left, Expanded, Right。

查看此 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 .