使用CSS重新排列DIV
给定一个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
希望很明显，理想的结果是：
Content to be above in this situation Content to be below in this situation Other elements
当尺寸固定时，可以很容易地将它们放在需要的位置，但是当内容可变时，我需要一些想法。 为了这种情况，请考虑两者的宽度都是100％。
编辑：一个CSS解决scheme是最理想的解决scheme。 感谢您提到的Javascript选项。 不要过于罗嗦什么或为什么（或谁）…我特别寻找一个CSS唯一的解决scheme（它可能会遇到其他解决scheme，如果不能平移）。
还有一个……还有其他的元素。 有人提出了一个很好的build议，因为我certificate了这个有限的情况 – 因为这可能是最好的答案，但是我也希望确保下面的元素不受影响。
这个解决scheme只使用CSS和可变内容
#wrapper { display: table; } #firstDiv { display: table-footer-group; } #secondDiv { display: table-header-group; }
一个仅用于CSS的解决scheme （适用于IE10 + ） – 使用Flex Box的order属性：
演示： http : //jsfiddle.net/hqya7q6o/596/
<html> <head> <style> #flex { display: flex; flex-direction: column; } #a { order: 2; } #b { order: 1; } #c { order: 3; } </style> </head> <body> <div id="flex"> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> </div> <body> </html>
更多信息： https ： //developer.mozilla.org/en-US/docs/Web/CSS/order
正如其他人所说，这不是你想要在CSS中做的事情。 你可以用绝对的定位和奇怪的利润来欺骗它，但这不是一个可靠的解决scheme。 在你的情况最好的select是转向JavaScript。 在jQuery中，这是一个非常简单的任务：
$('#secondDiv').insertBefore('#firstDiv');
或更一般地说：
$('.swapMe').each(function(i, el) { $(el).insertBefore($(el).prev()); });
绝对没有办法通过CSS来实现你想要的 – 除非 ：
- 你知道每个元素的确切渲染高度（如果是这样，你可以绝对定位内容）。 如果你正在处理dynamic生成的内容，那么你倒霉了。
- 你知道这些元素的确切数量。 同样，如果您需要为dynamic生成的多个内容块执行此操作，那么您运气不佳。
如果以上是真的，那么你可以通过绝对定位元素来做你想做的事情 –
#wrapper { position: relative; } #firstDiv { position: absolute; height: 100px; top: 110px; } #secondDiv { position: absolute; height: 100px; top: 0; }
再说一次，如果你不知道至less#firstDiv的高度，你就不可能通过CSS来做你想要的。 如果这些内容是dynamic的，你将不得不使用JavaScript。
这可以使用Flexbox完成。
创build一个同时应用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>
这是一个解决scheme：
<style> #firstDiv { position:absolute; top:100%; } #wrapper { position:relative; }
但我怀疑你有一些内容，遵循封装分区…
如果你知道，或者可以强制上层元素的大小，你可以使用
position : absolute;
在你的CSS，并给予divs他们的位置。
否则JavaScript似乎是唯一的出路：
fd = document.getElementById( 'firstDiv' ); sd = document.getElementById( 'secondDiv' ); fd.parentNode.removeChild( fd ); sd.parentNode.insertAfter( fd, sd );
或类似的东西。
编辑：我刚刚发现这可能是有用的： w3文件css3移动
负面的页边距可以达到这个效果，但是他们需要为每个页面定制。 例如，这个标记…
<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>
…和这个CSS …
.product { width: 400px; } .desc { margin-top: 5em; } .sidenote { margin-top: -7em; }
…可以让你把第一段的第二段拉到
当然，你必须手动调整你的CSS的不同的描述长度，以便介绍段落跳转到适当的数量，但是如果你对其他部分的控制有限，并且完全控制了标记和CSS，那么这可能是一个选项。
那么，有一点绝对的定位和一些狡猾的边际设置，我可以接近，但它不完美或漂亮：
#wrapper { position: relative; margin-top: 4em; } #firstDiv { position: absolute; top: 0; width: 100%; } #secondDiv { position: absolute; bottom: 0; width: 100%; }
“margin-top：4em”是特别讨厌的一点：这个margin需要根据firstDiv中内容的数量进行调整。 根据您的具体要求，这可能是可能的，但我希望无论如何，有人可能能够build立在这个坚实的解决scheme。
埃里克有关javascript的评论应该可以追求。
你只需要这个！ 在CSS浮动第一个div左边或右边。 向左或向右浮动第二个div与第一个div相同。 清除左边或右边相同的第二个div的两个div。 例如：
#firstDiv { float: left; } #secondDiv { float: left; clear: left; }
玩我的朋友。
我正在寻找一种方法来改变只有移动版本的div的订单，所以我可以很好地风格。 感谢nickf的回复，我得到了这样一段代码，它可以很好的满足我的需求，所以我尽pipe和大家分享了一下：
// 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 });
使用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>
这只能用CSS来完成！
请检查我对这个类似的问题的答案：
https://stackoverflow.com/a/25462829/1077230
我不想双重张贴我的答案，但缺点是，父母需要成为一个弹性盒元素。 例如：
（只在这里使用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; }
通过指定display: flex和flex-direction : column来为父div使用flex。 然后使用命令来确定哪个子div先来
具有更大浏览器支持的解决scheme，然后是Flexbox（适用于IE≥9）：
#wrapper { -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); } #wrapper > * { -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); }
<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
CSS真的不应该用来重构HTML后端。 但是，如果你知道这两个元素的高度，并且感觉不好，就有可能。 此外，文本select将在div之间进行混乱，但这是因为HTML和CSS顺序是相反的。
#firstDiv { position: relative; top: YYYpx; height: XXXpx; } #secondDiv { position: relative; top: -XXXpx; height: YYYpx; }
其中XXX和YYY分别是firstDiv和secondDiv的高度。 这将与尾部元素一起工作，不像顶部的答案。
我有一个更好的代码，由我做的，它是如此之大，只是为了显示这两个东西…创build一个4×4表和垂直alignment不只是一个单元格。
它不使用任何IE破解，没有vertical-align：middle; 完全…
它不用于垂直居中显示表，display：table-rom; 显示：表细胞;
它使用了一个容器的技巧，它有两个div，一个隐藏（位置不正确，但是使父级具有正确的variables大小），一个隐藏后可见，但顶部：-50％。 所以是正确的位置。
请参阅使窍门的div类：BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible
请在课程名称上使用西class牙语（这是因为我说西class牙语，这是如此的棘手，如果我使用英语，我迷路了）。
完整的代码：
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en" /> <meta name="language" content="en" /> <title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title> <style type="text/css"> html,body{ margin:0px; padding:0px; width:100%; height:100%; } div.BloqueTipoTabla{ display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%; } div.BloqueTipoFila_AltoAjustadoAlContenido{ display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto; } div.BloqueTipoFila_AltoRestante{ display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%; } div.BloqueTipoCelda_AjustadoAlContenido{ display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto; } div.BloqueTipoCelda_RestanteAncho{ display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto; } div.BloqueTipoCelda_RestanteAlto{ display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%; } div.BloqueTipoCelda_RestanteAnchoAlto{ display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%; } div.BloqueTipoContenedor{ display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative; } div.BloqueTipoContenedor_VerticalmenteCentrado{ display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%; } div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{ display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%; } div.BloqueTipoContenido_VerticalmenteCentrado_Visible{ display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%; } </style> </head> <body> <h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1> <div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;"> <div class="BloqueTipoFila_AltoAjustadoAlContenido"> <div class="BloqueTipoCelda_AjustadoAlContenido"> [1,1] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [1,2] </div> <div class="BloqueTipoCelda_RestanteAncho"> [1,3] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [1,4] </div> </div> <div class="BloqueTipoFila_AltoAjustadoAlContenido"> <div class="BloqueTipoCelda_AjustadoAlContenido"> [2,1] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [2,2] </div> <div class="BloqueTipoCelda_RestanteAncho"> [2,3] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [2,4] </div> </div> <div class="BloqueTipoFila_AltoRestante"> <div class="BloqueTipoCelda_RestanteAlto"> <div class="BloqueTipoContenedor" style="border:1px solid lime;"> <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;"> <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto"> The cell [3,1] <br /> * * * * <br /> * * * * <br /> * * * * <br /> Now is the highest one </div> <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;"> The cell [3,1] <br /> * * * * <br /> * * * * <br /> * * * * <br /> Now is the highest one </div> </div> </div> </div> <div class="BloqueTipoCelda_RestanteAlto"> <div class="BloqueTipoContenedor" style="border:1px solid lime;"> <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;"> <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto"> This is<br />cell [3,2] </div> <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;"> This is<br />cell [3,2] </div> </div> </div> </div> <div class="BloqueTipoCelda_RestanteAnchoAlto"> <div class="BloqueTipoContenedor" style="border:1px solid lime;"> <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;"> <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto"> This is cell [3,3] <br/> It is duplicated on source to make the trick to know its variable height <br /> First copy is hidden and second copy is visible <br/> Other cells of this row are not correctly aligned only on IE!!! </div> <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;"> This is cell [3,3] <br/> It is duplicated on source to make the trick to know its variable height <br /> First copy is hidden and second copy is visible <br/> Other cells of this row are not correctly aligned only on IE!!! </div> </div> </div> </div> <div class="BloqueTipoCelda_RestanteAlto"> <div class="BloqueTipoContenedor" style="border:1px solid lime;"> <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;"> <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto"> This other is<br />the cell [3,4] </div> <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;"> This other is<br />the cell [3,4] </div> </div> </div> </div> </div> <div class="BloqueTipoFila_AltoAjustadoAlContenido"> <div class="BloqueTipoCelda_AjustadoAlContenido"> [4,1] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [4,2] </div> <div class="BloqueTipoCelda_RestanteAncho"> [4,3] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [4,4] </div> </div> </div> </body> </html>
晚会晚了，但你也可以这样做：
<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>
或者为元素设置一个绝对位置，并通过从页面边缘而不是边缘对象声明它们。 使用％作为更适合其他屏幕尺寸等。 这是我如何克服这个问题…谢谢，希望你的目标…
仅适用于CSS解决scheme1.封套的高度应固定，或者2.第二格的高度应固定
.move-wrap { display: table; table-layout: fixed; // prevent some responsive bugs width: 100%; // set a width if u like /* TODO: js-fallback IE7 if u like ms */ } .move-down { display: table-footer-group; } .move-up { display: table-header-group; }
用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; [...] }
编辑：这是很好的设置一些background-color的div-s正确地看到的东西。
我有一个简单的方法来做到这一点。
<!-- HTML --> <div class="wrapper"> <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div> <div>Content that stays in place</div> <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div> </div> <!-- CSS --> .sm-hide {display:block;} .sm-show {display:none;} @media (max-width:598px) { .sm-hide {display:none;} .sm-show {display:block;} }
