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

时间:2013-11-16 12:41:25

标签: html css resize floating

我知道这是一个标准问题,但我试图得到一个非常特殊的行为。我得到了以下示例代码:

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。

感谢您的帮助, 最好的祝福, 亚龙

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

这是ANSWER

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