移動後調整浮動div

Question

我有一個DIV。在裏面我有兩個漂浮的DIV。 一個漂浮在左邊，一個漂浮在右邊。

左浮動的寬度爲calc（100％-284px）。 右邊浮動的寬度爲284px。 它們都在DIV中，這是一個寬度爲70％的中心彈出窗口。

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

當我調整窗口的大小時，70％的縮小比較好。 爲了防止左浮動被壓扁，它的最小寬度爲284px。

我繼續縮小屏幕，正確的浮子下降到左邊的浮子下面。 現在看起來很糟糕，因爲我有一列和兩行（一個稍微偏左，一個稍右） ，稍微偏左一個旁邊有一個大的差距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媒體查詢。當它達到250px時，正確的div會下降;

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