0

2 番目と 4 番目のボックスを右に引き出すには、CSS メディア クエリを使用する必要があります。ブラウザーの幅が広がると、ボックス 2 と 4 は右に移動する必要があり、ボックス 2 はボックス 1 の下で平らなままにする必要があります。ボックスの順序が必要です。

私が思いついた解決策は近いですが、ボックス 2 のテキストが長すぎると、ボックス 3 が押し下げられます。ボックス 3 がボックス 1 の下で平らなままであることが重要です。

JsFiddle の例を次に示します: http://jsfiddle.net/FJswg/

<html>
  <style>
    body {
      margin:0;
      padding:0;
    }
    div {
      padding:10px;
    }
    #box1 {
      color:#fff;
      background-color:#00f;
    }
    #box2 {
      background-color:#0f0;
    }
    #box3 {
      background-color:#f00;
    }
    #box4 {
      color:#fff;
      background-color:#000;
    }
    @media screen and (min-width: 500px) {
      #box1 {
        float:left;
        clear:left;
        width:150px;
      }
      #box2 {
        margin-left:170px;
      }
      #box3 {
        float:left;
        clear:left;
        width:150px;
      }
      #box4 {
        margin-left:170px;
      }
    }
  </style>
  <body>
    <div id="box1">Box 1</div>
    <div id="box2">Box 2, Consectetur gentrify gluten-free fanny pack, bespoke enim ethical letterpress pitchfork ullamco pickled.</div>
    <div id="box3">Box 3</div>
    <div id="box4">Box 4, 8-bit mumblecore excepteur readymade single-origin coffee fingerstache mlkshk. Sint fanny pack raw denim quinoa. Ennui vero photo booth magna.</div>
  </body>
</html>

アップデート

JavaScript を使用する必要がある場合、これが最もクリーンな方法ですか? http://jsfiddle.net/FJswg/8/

var size = 0;
$(window).resize(function() {
    checkWidth();
});
$(document).ready(function() {
    checkWidth();
});

function checkWidth() {
    var newWidth = $(window).width();
    var newSize = 0;
    if (newWidth >= 500) {
        newSize = 1;
    }
    if (newSize != size) {
        size = newSize;
        $moveElement = (size < 0) ? $("#box2") : $("#box3");
        $("#box1").after($moveElement);
    }
}?
4

1 に答える 1

0

1 つのオプションは、相対 + 絶対配置を使用することです。ここでデモを参照してください。

@media screen and (min-width: 500px) {
      #box1 {
        float:left;
        clear:left;
        width:150px;
      }
      #box2 {
        margin-left:170px;
      }
      #box3 {
        top: 50px;            
        clear:left;
        width:150px;
        position: absolute;
      }
      #box4 {
        margin-left:170px;
      }

高さに動的に設定するtopには、javascript を使用する必要がある場合もあります。box1

于 2012-06-15T19:28:59.133 に答える