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

Question

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

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

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

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

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

如果元素在 HTML 中按以下顺序排列，则可以正常工作：Left, Right, Expanded。但为了更具语义，我需要这个顺序：左、扩展、右。

看到这个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不支持display: table，尽管有一个JavaScript 修复程序。

Answer 2

如果您仅限于使用浮点数，则需要确保 .left 和 .expanded 都向左浮动。您可能还想使用 max-width 来防止向下推 .right 。

.left, .expanded {
   float: left;
}