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

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

当前回答

如果你只使用css，你可以使用flex。

.price { 显示:flex; 对齐项目:中心; justify-content:中心; flex-direction: row-reverse;/ /恢复水平 / / flex-direction: column-reverse;恢复垂直｝ < div class = "价格" > < div >第一块< / div > 第二块< div > < / div > < / div >

2019-12-18 09:12:02

其他回答

这里有一个解决方案:

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

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

2008-10-20 23:46:14

我正在寻找一种方法来改变divs的顺序，只针对移动版本，这样我就可以很好地设计它。多亏了nickf的回复，我才能让这段代码很好地满足了我的需求，所以我想和你们分享一下:

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});

2013-06-28 11:56:59

使用css很容易，只需使用display:block和z-index属性

这里有一个例子:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

CSS:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

编辑:为div设置一些背景颜色是很好的，这样可以正确地看到东西。

2012-11-11 14:26:18

只需通过指定display: flex和flex-direction: column为父div使用flex。然后使用order来确定哪个子div先出现

2016-08-17 19:03:43

这个解决方案只使用CSS，并且适用于可变内容

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

2012-08-22 08:56:23

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

推荐文章

最新文章

标签