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

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

当前回答

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

<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

其他回答

CSS唯一解决方案 1. 包装的高度应固定或 2. 第二个div的高度应该固定

2010-06-01 13:15:08

好吧，通过一些绝对的定位和一些狡猾的边缘设置，我可以接近，但它并不完美或漂亮:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

“margin-top: 4em”是特别讨厌的部分:这个边距需要根据firstDiv的内容量进行调整。根据你的具体要求，这是可能的，但我希望有人能在这个基础上建立一个固溶体。

Eric关于JavaScript的评论应该继续下去。

2008-10-20 23:38:49

使用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

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

使用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

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

推荐文章

最新文章

标签