Question

我需要使用CSS媒体查询将第2和第4个框拉出到右边。当浏览器变宽时，框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);
    }
}?

Answer 1

一个选项是使用相对+绝对定位。请在此处查看demo。

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

您可能还需要使用javascript动态设置top到box1的高度。

使用CSS媒体查询在其他容器之间提取2个容器

更新

1 个答案: