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;

并删除浮动。现在，您只需要将左侧和中级的浮动更改为“右侧”，将宽度更改为“50％”。就是这样。

这是一个例子：http://jsfiddle.net/5MdY3/

Answer 2

这是ANSWER。

我使用了Bootstrap 3 CSS框架来实现我所知道的要求。我想它甚至可以在没有引导程序的情况下完成，但我不是那么专家。通过你的帖子，我认为你正在寻找一些响应式设计。为方便起见，我建议您使用Bootstrap 3。惊人的框架，有助于在几秒钟内完成更多的事情。

不应包装可变长度的浮动div

2 个答案: