Css div响应式设计

Question

<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到500px之间，同时保持在左边div的右边，只有当容器div变得小于400（两个div的宽度）时，绿色div才应该低于蓝色div。

Answer 1

min-width和max-width不是这样工作的：http://css-tricks.com/almanac/properties/m/max-width/

如果可以使用calc，这是一种方法：演示

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

如果没有，可以执行以下操作：演示

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