的CSS DIV響應式設計

Question

我有2周的div一個div容器內：

<div class="container"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

這是它應該是如何工作的：

左一個，如果固定大小的，正確的應響應，並應具有最小和最大寬度，這意味着如果你縮小窗口寬度，正確的div應該縮小它的寬度！ （在它的最小和最大寬度之間）並且保持在左邊div的右邊，直到容器div的寬度變得小於左div寬度+右div寬度，那麼右div應該落在左div下面！

http://jsfiddle.net/5m8Lj/6/

寬度電流的CSS，綠色的div應用200和500像素之間縮小其寬度，而在左div的右保持，僅當div容器變得小於400（二者的div的寬度）然後綠div應該低於藍色div。

謝謝！

Answer 1

min-width和max-width不起作用這樣的：http://css-tricks.com/almanac/properties/m/max-width/

如果你可以使用calc，這是做這件事：DEMO

.right { 
    width: calc(100% - 200px); 
} 

如果沒有，你可以做如下：DEMO

這假設heig ht和寬度爲.left是設置數字。

.left { 
    position:fixed; 
    left: 0; 
    top: 0; 
} 

.right { 
    margin-left: 200px; 
    min-width:200px; 
    width: auto; 
} 

@media screen and (max-width: 400px){ 
    .right { 
     width: 100%; 
     clear: both; 
     margin-left: 0; 
     margin-top: 200px; 
    } 
}