html - 不应该包装可变长度的 float div

Question

我知道这是一个标准问题，但我正在尝试获得一个非常特殊的行为。我得到以下示例代码:

CSS:

    .left{
        background-color: red;
        min-width: 300px;
    width: 40%;
        float: left;
    }
    .middle{
        background-color: blue;
        width: 40%;
        overflow-x: auto;
        white-space: nowrap;
        float: left;
    }

    .right{
        background-color: green;
        min-width: 100px;
        width: 10%;
        float: left;
    }

HTML:

<div class="left">LEFT</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="right">NOWRAP</div>

我不想包装任何东西。调整大小时，中间的 div 应该重新调整大小，但它永远不会换行!我需要可变宽度。当我缩小浏览器窗口时，起初它看起来是正确的:中间的 div 变小并得到一个滚动条。这就是我要找的。但是当我继续缩小绿色 div 时，它会被包裹起来。相反，我希望中间的 div 变得越来越小。

我已经在使用 bootstrap 2。

感谢您的帮助，此致，亚龙

Answer 1

绿色的 div 会被包裹起来，直到达到最小宽度。然后你的 div.right ("NOWRAP") 将漂浮在中间和左边的 div 之下。为避免这种情况，您必须颠倒 div 的顺序:

<div class="right">NOWRAP</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="left">LEFT</div>

然后制作你的.right div

position: absolute;
right: 0;

并删除 float 。现在你只需要将你的 float 从左边和中间类更改为“右”，并将宽度更改为例如“50%”。就这样。

这里有一个例子:http://jsfiddle.net/5MdY3/