我如何才能重新排序我的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唯一的解决方案(它可能必须满足其他解决方案，如果它不成功)。

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

当前回答

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

/ / 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

其他回答

在CSS中，将第一个div向左或向右浮动。第二个div与第一个div一样向左或向右浮动。应用clear:向左或向右，与上面两个div的第二个div相同。

例如:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

2011-02-13 12:15:35

这里有一个解决方案:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

但我怀疑您有一些内容遵循包装器div…

2008-10-20 23:46:14

负的顶部边距可以达到这种效果，但是需要为每一页定制。例如，这个标记…

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

.．.这个CSS…

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

…你可以把第二段放在第一段上面。

当然，您必须手动调整CSS以适应不同的描述长度，以便介绍段跳跃适当的数量，但如果您对其他部分的控制有限，而对标记和CSS有完全的控制，那么这可能是一个选择。

2008-10-22 02:05:09

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

2011-07-15 17:49:19

如果您知道，或者可以强制将成为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

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

推荐文章

最新文章

标签