使用CSS媒体查询在其他容器之间拉出2个容器_Css_Media Queries

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

css

使用CSS媒体查询在其他容器之间拉出2个容器,css,media-queries,Css,Media Queries,我需要使用CSS媒体查询来拉出右边的第二个和第四个框。当浏览器加宽时，框2和4需要向右移动，框2需要在框1下保持齐平。箱子的顺序是必需的我提出的解决方案很接近，但是当框2的文本太长时，它会向下推框3。重要的是，方框3在方框1下保持齐平以下是JSFIDLE中的一个示例：身体{ 保证金：0；填充：0； } div{ 填充：10px； } #框1{ 颜色：#fff；背景色：#00f； } #框2{ 背景色：#0f0； } #框3{ 背景色：#f00； } #方框4{ 颜色：#fff；背景

我需要使用CSS媒体查询来拉出右边的第二个和第四个框。当浏览器加宽时，框2和4需要向右移动，框2需要在框1下保持齐平。箱子的顺序是必需的

我提出的解决方案很接近，但是当框2的文本太长时，它会向下推框3。重要的是，方框3在方框1下保持齐平

以下是JSFIDLE中的一个示例：


身体{
保证金：0；
填充：0；
}
div{
填充：10px；
}
#框1{
颜色：#fff；
背景色：#00f；
}
#框2{
背景色：#0f0；
}
#框3{
背景色：#f00；
}
#方框4{
颜色：#fff；
背景色：#000；
}
@媒体屏幕和屏幕（最小宽度：500px）{
#框1{
浮动：左；
清除：左；
宽度：150px；
}
#框2{
左边距：170px；
}
#框3{
浮动：左；
清除：左；
宽度：150px；
}
#方框4{
左边距：170px；
}
}
方框1
第2箱，Concertetur gentrify无麸质芬尼包装，定制enim伦理版活版干草叉ullamco腌制。
方框3
方框4，8位mumblecore例外现成单品咖啡指Stache mlkshk。圣芬尼包装粗牛仔布奎奴亚藜。厌倦维罗摄影棚麦格纳。

使现代化如果我必须使用JavaScript，这是最干净的方法吗

var size=0；
$（窗口）。调整大小（函数（）{
检查宽度（）；
});
$（文档）.ready（函数（）{
检查宽度（）；
});
函数checkWidth（）{
var newWidth=$（窗口）.width（）；
var-newSize=0；
如果（新宽度>=500）{
newSize=1；
}
如果（新闻大小！=大小）{
大小=新闻大小；
$moveElement=（大小<0）？$（“#框2”）：$（“#框3”）；
$（“#box1”）。在（$moveElement）之后；
}
}?

一个选项是使用相对+绝对定位。看这里

您可能还需要使用javascript将

top

动态设置为

box1

高度

这个想法很有趣，但如果我必须使用JavaScript，我想我应该简单地重新排列DOM中的元素（将框3移动到框2之前），这样就不需要额外的计算。

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

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);
    }
}?

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