Html 如何仅使用 CSS 重新排序我的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/220273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I reorder my divs using only CSS?
提问by devmode
Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a divabove another divwhen they are not in that order in the HTML? Both divs contain data that varies in height and width.
给定一个由于其他要求而无法修改 HTML 的模板，当它们在 HTML 中的顺序不相同时，如何div在另一个上方显示（重新排列）div？两者都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
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.
当尺寸固定后，很容易将它们放置在需要的地方，但我需要一些关于何时内容可变的想法。对于这种情况，请仅将两者的宽度视为 100%。
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).
我特别在寻找一个只使用 CSS 的解决方案（如果没有成功，它可能必须与其他解决方案相遇）。
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.
在此之后还有其他元素。考虑到我展示的有限场景，提到了一个很好的建议——考虑到它可能是最好的答案，但我也希望确保遵循此的元素不会受到影响。
回答by Jordi
This solutionuses only CSS and works with variable content
此解决方案仅使用 CSS 并处理可变内容
#wrapper { display: table; }
#firstDiv { display: table-footer-group; }
#secondDiv { display: table-header-group; }
回答by Justin
A CSS-only solution(works for IE10+) – use Flexbox's orderproperty:
纯 CSS 解决方案（适用于IE10+）——使用 Flexbox 的order属性：
Demo: http://jsfiddle.net/hqya7q6o/596/
演示：http: //jsfiddle.net/hqya7q6o/596/
#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }<div id="flex">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>More info: https://developer.mozilla.org/en-US/docs/Web/CSS/order
更多信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/order
回答by nickf
As others have said, this isn't something you'd want to be doing in CSS. You can fudge it with absolute positioning and strange margins, but it's just not a robust solution. The best option in your case would be to turn to javascript. In jQuery, this is a very simple task:
正如其他人所说，这不是您想在 CSS 中做的事情。您可以使用绝对定位和奇怪的边距来捏造它，但这不是一个强大的解决方案。在你的情况下最好的选择是转向 javascript。在 jQuery 中，这是一个非常简单的任务：
$('#secondDiv').insertBefore('#firstDiv');
or more generically:
或更笼统地说：
$('.swapMe').each(function(i, el) {
$(el).insertBefore($(el).prev());
});
回答by BlakePetersen
This can be done using Flexbox.
这可以使用 Flexbox 来完成。
Create a container that applies both display:flexand flex-flow:column-reverse.
创建一个同时应用display:flex和flex-flow:column-reverse的容器。
/* -- Where the Magic Happens -- */
.container {
/* Setup Flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Reverse Column Order */
-webkit-flex-flow: column-reverse;
flex-flow: column-reverse;
}
/* -- Styling Only -- */
.container > div {
background: red;
color: white;
padding: 10px;
}
.container > div:last-of-type {
background: blue;
}<div class="container">
<div class="first">
first
</div>
<div class="second">
second
</div>
</div>Sources:
资料来源：
回答by Matt Howell
There is absolutely no way to achieve what you want through CSS alone while supporting pre-flexbox user agents (mostly old IE) -- unless:
在支持 pre-flexbox 用户代理（主要是旧的 IE）的同时，绝对没有办法单独通过 CSS 来实现你想要的——除非：
- You know the exact rendered height of each element (if so, you can absolutely position the content). If you're dealing with dynamically generated content, you're out of luck.
- You know the exact number of these elements there will be. Again, if you need to do this for several chunks of content that are generated dynamically, you're out of luck, especially if there are more than three or so.
- 您知道每个元素的确切渲染高度（如果是这样，您可以绝对定位内容）。如果您正在处理动态生成的内容，那么您就不走运了。
- 您知道这些元素的确切数量。同样，如果您需要对动态生成的多个内容块执行此操作，那么您就不走运了，尤其是当内容超过三个左右时。
If the above are true then you can do what you want by absolutely positioning the elements --
如果上述情况属实，那么您可以通过绝对定位元素来做您想做的事情-
#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }
Again, if you don't know the height want for at least #firstDiv, there's no way you can do what you want via CSS alone. If any of this content is dynamic, you will have to use javascript.
同样，如果您至少不知道#firstDiv 所需的高度，那么您无法仅通过 CSS 做您想做的事。如果这些内容中的任何一个是动态的，您将不得不使用 javascript。
回答by buti-oxa
Here's a solution:
这是一个解决方案：
<style>
#firstDiv {
position:absolute; top:100%;
}
#wrapper {
position:relative;
}
But I suspect you have some content that follows the wrapper div...
但是我怀疑您在包装器 div 后面有一些内容...
回答by Arun Kumar M
With CSS3 flexbox layout module, you can order divs.
使用 CSS3 flexbox 布局模块，您可以订购 div。
#wrapper {
display: flex;
flex-direction: column;
}
#firstDiv {
order: 2;
}
<div id="wrapper">
<div id="firstDiv">
Content1
</div>
<div id="secondDiv">
Content2
</div>
</div>
回答by Carl Camera
Negative top margins can achieve this effect, but they would need to be customized for each page. For instance, this markup...
负上边距可以实现这种效果，但需要为每个页面进行自定义。例如，这个标记...
<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>
...and this CSS...
...还有这个 CSS ...
.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }
...would allow you to pull the second paragraph above the first.
...将允许您将第二段拉到第一段之上。
Of course, you'll have to manually tweak your CSS for different description lengths so that the intro paragraph jumps up the appropriate amount, but if you have limited control over the other parts and full control over markup and CSS then this might be an option.
当然，您必须针对不同的描述长度手动调整 CSS，以便介绍段落跳出适当的数量，但是如果您对其他部分的控制有限而对标记和 CSS 的完全控制，那么这可能是一个选择.
回答by Kris
If you know, or can enforce the size for the to-be-upper element, you could use
如果您知道或可以强制执行上层元素的大小，则可以使用
position : absolute;
In your css and give the divs their position.
在您的 css 中并为 div 指定它们的位置。
otherwise javascript seems the only way to go:
否则 javascript 似乎是唯一的出路：
fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );
or something similar.
或类似的东西。
edit: I just found this which might be useful: w3 document css3 move-to
编辑：我刚刚发现这可能有用：w3 document css3 move-to
回答by Bobby Hyman
Well, with a bit of absolute positioning and some dodgy margin setting, I can get close, but it's not perfect or pretty:
好吧，通过一些绝对定位和一些狡猾的边距设置，我可以接近，但它并不完美或漂亮：
#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }
The "margin-top: 4em" is the particularly nasty bit: this margin needs to be adjusted according to the amount of content in the firstDiv. Depending on your exact requirements, this might be possible, but I'm hoping anyway that someone might be able to build on this for a solid solution.
“margin-top: 4em”是特别讨厌的一点：这个边距需要根据 firstDiv 中的内容量进行调整。根据您的确切要求，这可能是可能的，但无论如何我希望有人能够在此基础上构建一个可靠的解决方案。
Eric's comment about JavaScript should probably be pursued.
Eric 对 JavaScript 的评论可能应该继续下去。
