Question

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

我想要实现的布局是：

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

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

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

如果元素在HTML中按此顺序排列，则可以正常工作： Left，Right，Expanded 。但是为了更加语义化，我需要这个顺序： 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。

Answer 2

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

.left, .expanded {
   float: left;
}

将右浮动元素保持在与块相同的行上

2 个答案: