css - float Div 在移动后调整大小

Question

我有一个 DIV。在它里面我有两个 float DIV。 一只向左漂浮，一只向右漂浮。

向左浮动的宽度为 calc(100%-284px)。 向右浮动的宽度为 284px。 它们都位于一个 DIV 中，DIV 是一个宽度为 70% 的居中弹出窗口。

   -----------------------
   |   Main Div 70%      |
15%|---------- ----------|15%
   || float  | |  float ||
   || left   | |  right ||
   |---------- ----------|
   -----------------------

当我调整窗口大小时，70% 缩小了，这很好。 为防止左侧 float 被挤压，它的最小宽度为 284 像素。

我继续缩小我的屏幕，右边的 float 下降到左边的 float 下面。 现在看起来很糟糕，因为我有一列和两行(一列略左，一列略右) 稍微左边的旁边有284px的大空隙。

--------------------
| -----------      |
| | left    |  284 |
| | float   |  gap |
| -----------      |
|  ?     ----------|
|  gap   |  right ||
|        |        ||
|        ----------|
--------------------

理想情况下，我希望我的左浮动将大小从 calc(100%-284) 更改为 100%。 现在位于其下方的右侧 float 。

--------------------
|------------------|
| left      |
|------------------|
|   -----------    |
|   |  right  |    |
|   -----------    |
--------------------

谁能告诉我如何执行此操作的代码，我想这很简单，但我看不到。

#Left{
        display: block;
        float: left;
        text-align: center;
        color: #FFFFFF;
        overflow-y: auto;
        overflow-x: hidden;
        float: left;
        width: -webkit-calc(100% - 284px); 
        width: -moz-calc(100% - 284px);
        width: calc(100% - 284px);
        min-width: 284px;
        height: auto;
        margin-left: 6px;
        margin-top: 0px;
        margin-bottom: 6px;
    }

    #Right{
        float: right;
        width: 250px;
        height: auto;
        margin-right: 6px;
        margin-top: 0px;
        margin-bottom: 6px;
            }

     #Popup {
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        border-radius: 3px 3px 3px 3px;
        color: #333333;
        display: none;
        font-size: 14px;
        margin-left: 15%;
        margin-right: 15%;
        position: fixed;
        top: 15%;
        bottom: 15%;
        width: 70%;
        z-index: 222;
        text-align: center;
}

谢谢克里斯

Answer 1

我不确定你制作的是哪种布局，但是， 您可以使用 css 媒体查询。右侧div达到250px时会下降；

http://jsfiddle.net/3VPYd/

@media all and (max-width: 732px) {
     #left {
        background: green;
        float: none;
        width: 100%;
    }
    #right {
        background: pink;
        float: none;
        margin: auto;
        width: 50%;
    }
}