我如何才能重新排序我的div只使用CSS?

给定一个模板，HTML不能修改，因为其他要求，如何可能显示(重新安排)一个div上面的另一个div时，他们不是在HTML的顺序?两个div都包含高度和宽度不同的数据。

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

希望期望的结果是显而易见的:

Content to be above in this situation
Content to be below in this situation
Other elements

当尺寸是固定的，很容易定位他们在需要的地方，但我需要一些想法，当内容是可变的。为了实现这个场景，请将两者的宽度都考虑为100%。

我特别寻找一个css唯一的解决方案(它可能必须满足其他解决方案，如果它不成功)。

接下来还有其他因素。考虑到我演示的有限场景，我提到了一个很好的建议——考虑到它可能是最好的答案，但我也希望确保后面的元素不受影响。

当前回答

或者为元素设置一个绝对位置，并通过从页面的边缘而不是对象的边缘声明页边距来去除页边距。使用%，因为它更适合其他屏幕尺寸等。这就是我如何克服这个问题的……谢谢，希望这是你想要的…

2011-07-15 17:49:19

其他回答

仅为移动设备订购，并保持桌面本机顺序:

/ / html

<div>
  <div class="gridInverseMobile1">First</div>
  <div class="gridInverseMobile1">Second</div>
</div>

/ / css

@media only screen and (max-width: 960px) {
  .gridInverseMobile1 {
    order: 2;
    -webkit-order: 2;
  }
  .gridInverseMobile2 {
    order: 1;
    -webkit-order: 1;
  }
}

结果:

Desktop: First | Second
Mobile: Second | First

来源:https://www.w3schools.com/cssref/css3_pr_order.asp

2020-12-24 17:22:42

有点晚了，但你也可以这样做:

<div style="height: 500px; width: 500px;">

<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>

<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>

2017-03-09 22:43:58

如果您知道，或者可以强制将成为upper元素的大小，则可以使用

position : absolute;

在你的css中，给divs他们的位置。

否则javascript似乎是唯一的出路:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

或者类似的东西。

编辑:我刚刚发现这可能是有用的:w3文档css3移动到

2008-10-20 23:40:37

我有一个简单的方法。

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}

2015-01-29 04:48:12

使用CSS3 flexbox布局模块，您可以订购divs。

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>

2015-10-21 09:19:52

我如何才能重新排序我的div只使用CSS?

推荐文章

最新文章

标签