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

Question

我想有如下效果

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

Answer 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/

看看CSS媒体查询，如@reinder建议