2

メディアクエリを使用して div 内の要素の順序と位置を変更するにはどうすればよいですか? 次の画像は、目的の動作を示しています (ブラウザ ウィンドウの幅が 1000px より小さい場合は左の画像を使用し、大きい場合は 2 番目の画像を使用します)。

ポジショニング

最初のケースで「通常の」配置を使用し、2番目のケースでフロートを使用する最初の試み:

.box2 {
  float: right;
}

しかし、要素 2 (緑) はコンテナーの右端に配置されます。最初の要素に近くありません。

フィドル: http://jsfiddle.net/vmkRM/1/

4

4 に答える 4

1

FF と IE では十分にサポートされていませんが、flex-box モデルはそれを行うための正しい方法です (少なくとも概念的には、実用的な目的ではないにしても)。クロムでこれをチェックしてください：

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 に答える