html - 最后一个元素不应该先换行

Question

在此布局中，两项向左浮动，一项向右浮动: http://jsfiddle.net/RgkRq/9/

.content {
    background-color: red;
    float:left;
    width: 300px;
}
.menu {
    float:right;
    width: 150px;
    background-color: green;
}

<DIV class="container">
    <div class="content">CONTENT</DIV>
    <div class="content">CONTENT</DIV>
    <div class="menu">MENU</DIV>
</DIV>

当页面缩小时，最后一个元素将换行在另外两个元素下面，但我希望它保留在那里并让其他元素先换行。

我知道，我可以通过更改它们在 html 中的顺序来实现此目的，如下所示:http://jsfiddle.net/3vVwp/1/

我的问题是:有什么方法可以在不更改 html 的情况下在 css 中实现这种行为？

谢谢汉内斯

Answer 1

这不是最好的解决方案，但它可能是您所要求的替代方案。

http://jsfiddle.net/RgkRq/11/

菜单固定宽度，内容div收缩(灵活宽度)。当列宽达到最小值时，菜单宽度会缩小。

我所做的是将容器 div 设置为 display:table，将子 div 设置为 display:table-cell:

.container {
    display:table;
    width:100%;
}
.content {
    background-color: red;
    display:table-cell;
    border-right:10px solid #fff;
}
.menu {
    width: 150px;
    background-color: green;
    display:table-cell;
}

border-right 用于将内容分隔成列。

您需要检查浏览器支持，因为旧版浏览器不支持显示:表格。