Question

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

positioning

我第一次尝试在第一个案例中使用'普通'放置并在第二个案例中使用float：

.box2 {
  float: right;
}

然后元素2（绿色）在容器的最右边对齐。不接近第一个元素。

小提琴：http://jsfiddle.net/vmkRM/1/

Answer 1

试试这个

http://jsfiddle.net/vmkRM/3/

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

Answer 2

假设您的标准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/
（请注意，我使用较窄的宽度使其在小提琴中很好地工作 - 但它应该很容易适应你需要的实际宽度）

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

Answer 3

尽管FF和IE不支持它，但灵活盒模型是正确的方式（概念上至少如果不是出于实际目的）。看看这个用chrome：

http://jsfiddle.net/38cNE/4/

关键部分是：

#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;
}

Answer 4

对父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>

http://jsfiddle.net/ablealias/zCFff/

仅使用css更改订单和定位

4 个答案: