Question

如果检测到dom元素上的css元素add=FALSE，下面的脚本会检查浏览器宽度并移动一些div。此css元素取决于980px的媒体查询。代码工作顺利，但我觉得可能有一个更简单的方法来做到这一点。我知道这可能是通过花车在CSS中实现的，但感觉这样做会更简洁。任何有关如何提高此代码效率的建议都将非常感激。

text-align:center

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

对你有帮助吗？

Answer 2

你在找this之类的东西吗？当您更改页面的宽度时，红色和绿色列会交换边。

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

这是用jQuery重新排序HTML的有效方法吗？

2 个答案: