0

我需要使用 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

一种选择是使用相对+绝对定位。在此处查看演示。

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

于 2012-06-15T19:28:59.133 回答