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

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

当前回答

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

其他回答

CSS真的不应该被用来重构HTML后端。然而，如果你知道所涉及的两个元素的高度，并且感觉很笨拙，这是可能的。此外，当在div之间进行时，文本选择将会混乱，但这是因为HTML和CSS的顺序是相反的。

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

其中XXX和YYY分别是firstDiv和secondDiv的高度。这将适用于后面的元素，不像顶部的答案。

2009-02-14 20:38:34

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

2010-06-01 13:15:08

这只能用CSS来完成!

请检查我对这个类似问题的回答:

https://stackoverflow.com/a/25462829/1077230

我不想重复我的答案，但它的简短是，父元素需要成为一个flexbox元素。例如:

(此处仅使用webkit供应商前缀)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

然后，通过指示它们的顺序来交换div:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

2015-05-21 17:05:59

一个比flexbox更大的浏览器支持的解决方案(适用于IE≥9):

#包装{ -webkit-transform:写入scaleY (1); -ms-transform:写入scaleY (1); 变换:写入scaleY (1); ｝ #包装> * { -webkit-transform:写入scaleY (1); -ms-transform:写入scaleY (1); 变换:写入scaleY (1); ｝ < div id = "包装" > < div id = " firstDiv " > 在这种情况下，内容在下面 < / div > < div id = " secondDiv " > 在这种情况下满足于上面 < / div > < / div > 其他元素

对比显示:表;解决方案当.wrapper有任意数量的子节点时，此解决方案有效。

2016-09-22 01:21:43

仅css的解决方案(适用于IE10+) -使用Flexbox的order属性:

演示:http://jsfiddle.net/hqya7q6o/596/

#flex{显示:flex;flex-direction:列;｝ #a {order: 2;｝ #b {order: 1;｝ #c {order: 3;｝ flex < div id = " " > < div id = " " > < / div > b < div id = " b " > < / div > c < div id = " c " > < / div > < / div >

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/order

2015-01-26 22:17:26

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

推荐文章

最新文章

标签