Css div 响应式设计

Question

我在一个容器 div 中有 2 个 div：

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

它应该是这样工作的：

如果固定大小，则左 1 应该是响应式的，并且应该具有最小和最大宽度，这意味着如果您缩小窗口宽度，右 div 应该只是缩小它的宽度！ （在其最小和最大宽度之间）并保持在左侧div的右侧！，直到容器div的宽度变得小于left div width + right div min width，然后right div应该低于left 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，这是一种方法：DEMO

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

如果没有，您可以执行以下操作：DEMO

这假定.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;
    }
}