2 div，最左边一个，最右边一个，调整窗口大小时，需要第二个div跳到下一行但出现在最左边

【问题标题】：2 div, one most left, one most right, when resizing window, need second div jump to next line but appear on the most left2 div，最左边一个，最右边一个，调整窗口大小时，需要第二个div跳到下一行但出现在最左边
【发布时间】：2013-05-23 07:51:58
【问题描述】：

我想要有如下效果

2 个 div，一个在屏幕左侧，一个在屏幕右侧，但是当我调整屏幕大小时，当同一行对于两个 div 都不够大时，我希望第二个 div 跳转到下一行，但它应该出现在窗口的最左侧，这可能吗？

【问题讨论】：

是的，到目前为止您尝试过什么？正确方向的提示：查看“媒体查询”

标签： css html

【解决方案1】：

例如让 div 的宽度和高度为 200px；

HTML：

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

CSS：

html, body { padding: 0; margin: 0; }

.container {
    width: 100%;
    overflow: hidden;
}

    .container div {
        width: 200px;
        height: 200px;

    }

.left { float: left;  background-color: blue; }
.right { float: right; background-color: green; }

/* The magic part */
@media (max-width: 399px) {
    .right {
        float: left;   
    }
}

小提琴：http://jsfiddle.net/5m8Lj/

看看@reinder 建议的 CSS 媒体查询

【讨论】：