jQuery - 调整浏览器大小时移动 div

Posted 2023-04-13

【中文标题】jQuery - 调整浏览器大小时移动 div

【英文标题】：jQuery - Move div when resize browser

【发布时间】：2012-10-11 11:22:07

【问题描述】：

我想改变这个：

<div id="main 1" style="background: #ccc;" class="fourcol first clearfix" role="main">
LEFT
</div>

<div id="main middle" style="background: #ddd;" class="fourcol middle clearfix" role="main">
MENU
</div>  

<div id="main 3" style="background: #eee;" class="fourcol last clearfix" role="main">
RIGHT
</div> 

到这个（顺序：菜单，左，右）当我将窗口调整到 481px 以下时，用;

jQuery(document).ready(function($) 

$(window).resize(function() 
    var responsive_viewport = $(window).width();
    if (responsive_viewport < 481) 
            $('#inner-content').parent().prependTo('middle');
    
);

【问题讨论】：

@optimus - 将其发布为答案。你的方法比我的好。 :)

【参考方案1】：

使用这个

$(window).resize(function() 

   var responsive_viewport = $(window).width();

   //console.log(responsive_viewport);
   if (responsive_viewport < 481) 
      var middle_div = $('#main-middle').clone().remove();
      $("#main-1").before(middle_div);
   
);

您的 div id 有不允许的空间。我猜你错过了一个连字符或下划线。我在我的代码中添加了连字符。

当视口

干杯！！

【参考方案2】：

我注意到这是否完整。当我将视口宽度设置为 481 时，我遇到了一些问题。 所以我把它设置为 350

jsfiddle.net/CKfqv