CSS div响应式设计

Question

我在一个容器div中有2个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

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