移动后浮动 Divs 调整大小

Question

我有一个 DIV。在里面我有两个浮动的 DIV。 一个向左浮动，一个向右浮动。

向左浮动的宽度为 calc(100%-284px)。 右侧浮动的宽度为 284 像素。 它们都在一个 DIV 中，该 DIV 是一个宽度为 70% 的中心弹出窗口。

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

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

我继续缩小我的屏幕，右浮动下降到左浮动下方。 现在看起来很糟糕，因为我有一列和两行（一列略左，一列略右） 并且稍微左边的旁边有一个284px的大间隙。

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

理想情况下，我希望我的左浮动将大小从 calc(100%-284) 更改为 100%。 现在在它下面的右浮动。

--------------------
|------------------|
| 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%;
    }
}