如何使用媒体查询更改 div 中的元素顺序和位置？ 下图显示了所需的行为（当浏览器窗口小于 1000px 宽时使用左图，大于时使用第二个。）：
我第一次尝试在第一种情况下使用“正常”放置，在第二种情况下使用浮动：
.box2 {
float: right;
}
但是元素 2（绿色）在容器的最右侧对齐。不靠近第一个元素。
【问题讨论】：
标签： css css-float responsive-design media-queries
假设您有如下所示的标准 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;
}
}
这里有一个工作小提琴：http://jsfiddle.net/UwtZW/
（请注意，我使用了较窄的宽度以使其在小提琴中很好地工作 - 但它应该很容易适应您需要的实际宽度）
如果有人知道如何在不知道高度的情况下自动实现垂直对齐，我会非常有兴趣学习。当我尝试时，我无法克服浮动/垂直对齐冲突。
【讨论】：
@media 触发器应该更宽。
试试这个
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<style type="text/css">
@media (max-width: 1000px)
{
.container
{
width: 200px;
height: 200px;
}
.box1
{
margin: 26px 24px;
}
.box2
{
margin: 13px;
}
}
@media (min-width: 1000px)
{
.container .box1
{
float: right;
}
.container
{
width: 400px;
height: 150px;
}
.box1
{
margin: 50px 31px;
}
.box2
{
margin: 31px;
}
}
.container
{
border: 1px solid black;
}
.box1
{
width: 150px;
height: 40px;
background-color: #97D077;
}
.box2
{
width: 170px;
height: 80px;
background-color: #FFB366;
}
</style>
<div class="container" id="container1">
<div class="box1">
text</div>
<div class="box2">
img</div>
</div>
</body>
</html>
【讨论】：
虽然 FF 和 IE 对它的支持还不够好，但 flex-box 模型是实现它的正确方法（至少从概念上讲，如果不是出于实际目的）。用 chrome 看看这个：
关键部分是：
#container1 {
width: 200px;
height: 200px;
display: -webkit-flex;
-webkit-flex-wrap:wrap;
-webkit-flex-direction:row;
-webkit-justify-content:center;
-webkit-align-items:center;
}
#container2 {
width: 400px;
height: 150px;
display: -webkit-flex;
-webkit-flex-direction:row-reverse;
-webkit-justify-content:space-around;
-webkit-align-items:center;
}
【讨论】：
对父 DIV 使用 100% 宽度，看看这个小提琴
<div style="width:100%">
<div style="width:200px;height:200px;border:solid 1px black;position:relative;float:left"></div>
<div style="width:200px;height:100px;border:solid 1px black;position:relative;float:left;margin-top:50px;margin-left:50px">
</div>
【讨论】：