时间戳

首页 > 解决方案 > 如何在断点处重新排序 div/更改标记

javascript - 如何在断点处重新排序 div/更改标记

问题描述

我有两个并排显示内联块的 div，每个 div 的宽度为 45%。在某个断点处，它们的宽度都更改为 100%，导致它们堆叠。这显然超级简单。我的问题是：如何更改所述断点处的标记以使底部 div 出现在顶部？

我现有的标记在很大程度上依赖于inline-block关卡显示，此时我不希望将内容切换到flexbox站点范围内。因此，我追求使用inline-block.

考虑这个简单的例子：

.left, .right {
  display:inline-block;
  width:45%;
  text-align:center;
}
.left {
  background-color:tomato;
}
.right {
  background-color:aquamarine ;
}
p {
  padding:50px 0;
}

@media only screen and (max-width: 550px) {
 .left, .right {
    width:100%;
 }
}
<div class="left">
  <p>LEFT</p>
</div>

<div class="right">
  <p>RIGHT</p>
</div>

这里一切正常，但我想要的结果是，在断点之后，RIGHT div出现在LEFT的顶部。 div我显然可以使用flexbox重新排序 div 来实现这一点，但这需要数小时的工作来切换所有内容以支持此显示属性。我需要一个inline-block解决方案。想法赞赏。

标签： javascriptjqueryhtmlcssmedia-queries

解决方案

使用 float 指定 div 的位置，然后在 html 上切换 div，使右侧在左侧的上方

.left, .right {
  display:inline-block;
  width:45%;
  text-align:center;
}
.left {
  background-color:tomato;
  float:left;
}
.right {
  background-color:aquamarine ;
  float:right;
}
p {
  padding:50px 0;
}

@media only screen and (max-width: 550px) {
 .left, .right {
    width:100%;
 }
}
<div class="right">
  <p>RIGHT</p>
</div>

<div class="left">
  <p>LEFT</p>
</div>

推荐阅读