0

下面的脚本检查浏览器宽度并在检测到text-align:centerdom 元素上的 css 元素时移动一些 div。这个 css 元素依赖于 980px 的媒体查询。代码可以顺利运行，但我觉得也许有一种更简单的方法可以做到这一点。我知道这可能可以通过浮动在 CSS 中完成，但感觉这将是一种更清洁的方式。任何有关如何使此代码更有效的建议将不胜感激。

$(document).ready(function(){
  function moveDiv(){
    var $window = $(window);
    var windowsize = $window.width();

    if (windowsize < 980) {
      if ($(".interiortitle h1").css("text-align") == "center"){
        $( ".interiorpage .et_pb_column_1_4").insertAfter(".interiorpage .et_pb_column_3_4");
      }
    }
    else if (windowsize > 980) {
      $( ".interiorpage .et_pb_column_1_4").insertBefore(".interiorpage .et_pb_column_3_4");
    }
   }
   moveDiv();
   $(window).resize(moveDiv);
});
4

2 回答 2

1

你可以试试这个：

检查您的窗口大小是否已更改并为您的 div 应用一个新类：

var changeposdiv= $('.changeposdiv');

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

if (windowsize > 980) {
    changeposdiv.addClass('more980');
}

您的 HTML 示例

<div class="interiordiv">
    ABC
</div>
<div class="changeposdiv">
    Change it
</div>

CSS 将移动用户屏幕中的元素

.changeposdiv, .interiordiv {
    float: left
}

.more980 {
    float: right;
}

它对你有帮助吗？

于 2015-05-28T16:42:55.407 回答
0

你在寻找这样的东西吗？当您更改页面宽度时，红色和绿色列交换边。

HTML

<html>
<body>
  <div class="interiorpage">
    <div class="et_pb_column_1_4"></div>
    <div class="et_pb_column_3_4"></div>
  </div>
</body>
</html>

CSS

.interiorpage{
  height: 200px;
  border: 1px solid black;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}
div[class^=et_pb_column_]{
  width: 50%;
  height:100%;
}
.et_pb_column_1_4{
 background: #fcc;
 order: 2;
 -webkit-order: 2;
}
.et_pb_column_3_4{
 background: #cfc;
 order: 1;
 -webkit-order: 1;
}

@media all and (max-width: 500px) {
  .et_pb_column_1_4{
   order: 1;
   -webkit-order: 1;
  }
  .et_pb_column_3_4{
    order: 2;
   -webkit-order: 2;
  }
}
于 2015-05-28T16:44:27.923 回答