如何仅使用 CSS 重新排序我的 div? [英] How can I reorder my divs using only CSS?

问题描述

给定一个模板，其中的 HTML 因为其他要求而无法修改，当它们不在时，如何在另一个 div 上方显示(重新排列)一个 divHTML中的那个顺序?两个 div 都包含高度和宽度不同的数据.

<div id="firstDiv">在这种情况下的内容如下
<div id="secondDiv">在这种情况下要高于内容

其他元素

希望很明显，期望的结果是:

在这种情况下内容要在上面在这种情况下的内容如下其他元素

当尺寸固定后，很容易将它们放置在需要的地方，但我需要一些关于何时内容可变的想法.对于这种情况，请仅将两者的宽度都视为 100%.

我特别在寻找仅使用 CSS 的解决方案(如果没有成功，可能必须使用其他解决方案).

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

解决方案

这个解决方案 仅使用 CSS 并处理可变内容

#wrapper { display: table;}#firstDiv { display: table-footer-group;}#secondDiv { 显示:表头组；}

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div when they are not in that order in the HTML? Both divs contain data that varies in height and width.

<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

Hopefully it is obvious that the desired result is:

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

When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.

I am specifically looking for a CSS-only solution (and it will probably have to be met with other solutions if that doesn't pan out).

There are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated—given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.

解决方案

This solution uses only CSS and works with variable content

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

这篇关于如何仅使用 CSS 重新排序我的 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！