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用于将内容分成列。

您需要检查此内容是否支持浏览器，因为较旧的浏览器不支持display：table。

最后一个元素不应该先包装

1 个答案: