2

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

定位

我第一次尝试在第一种情况下使用“正常”放置，在第二种情况下使用浮动：

.box2 {
  float: right;
}

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

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

4

4 回答 4

1

尽管 FF 和 IE 对它的支持还不够好，但 flex-box 模型是正确的方法（至少从概念上讲，如果不是出于实际目的）。用 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;
}
于 2013-06-29T05:02:30.247 回答
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>
于 2013-06-29T04:49:45.070 回答
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;
    }
}

一个工作小提琴在这里：http: //jsfiddle.net/UwtZW/
（请注意，我使用了更窄的宽度使其在小提琴中很好地工作 - 但它应该很容易适应你需要的实际宽度）

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

于 2013-06-29T04:52:57.870 回答
0

使用宽度 100% 作为父 DIV，看看这个小提琴

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

于 2013-06-29T04:26:31.093 回答