css - 仅使用 CSS 更改顺序和位置

Question

如何使用媒体查询更改 div 中的元素顺序和位置？ 下图显示了所需的行为(当浏览器窗口宽度小于 1000 像素时使用左图，当浏览器窗口宽度大于 1000 像素时使用第二张图。):

我第一次尝试在第一种情况下使用“正常”放置，并在第二种情况下使用 float :

.box2 {
  float: right;
}

但是元素 2(绿色)在容器的最右侧对齐。不接近第一个元素。

fiddle :http://jsfiddle.net/vmkRM/1/

Answer 1

假设您有如下所示的标准 HTML:

<div id=outer>
    <div id=box1></div>
    <div id=box2></div>
</div>

CSS 像这样:

#box1 {
    width: 150px;
    height: 50px;
    background-color: green;
    margin: 10px;
}
#box2 {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 10px;
}

我可以通过添加此 CSS 来实现窄版本:

#box1, #box2 {
    margin-left: auto;
    margin-right: auto;
}

我可以通过添加此 CSS 来实现宽版本:

#outer {
    float: left;
}
#box1, #box2 {
    float: right;
}
#box1 {
    margin-top: 35px;
}

请注意，我通过手动计算额外的上边距来垂直对齐框，这有点作弊。

将其与媒体查询放在一起自动执行，如下所示:

#box1 {
    width: 150px;
    height: 50px;
    background-color: green;
    margin: 10px auto 10px auto;
}
#box2 {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 10px auto 10px auto;
}
@media (min-width: 450px) {
    #outer {
        float: left;
    }
    #box1, #box2 {
        margin: 10px;
        float: right;
    }
    #box1 {
        margin-top: 35px;
    }
}

工作 fiddle 在这里:http://jsfiddle.net/UwtZW/
(请注意，我使用了较窄的宽度以使其在 fiddle 中正常工作 - 但它应该很容易适应您需要的实际宽度)

如果有人知道如何在不知道高度的情况下自动实现垂直对齐，我将非常有兴趣学习。当我尝试时，我无法克服 float /垂直对齐冲突。