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

给定一个模板，其中HTML不能被修改，因为其他需求，如何可能显示(重新排列)另一个div之上的div，当他们不是在HTML的顺序?两个__abc0都包含高度和宽度变化的数据。

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

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

470908 次浏览
小开

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

#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的评论应该继续下去。

小开

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

小开

正如其他人所说，这不是你想在CSS中做的事情。你可以用绝对的定位和奇怪的边际来蒙混过关，但这不是一个可靠的解决方案。在您的情况下，最好的选择是转向javascript。在jQuery中，这是一个非常简单的任务:

$('#secondDiv').insertBefore('#firstDiv');

或者更一般地说:

$('.swapMe').each(function(i, el) {
$(el).insertBefore($(el).prev());
});
小开

这里有一个解决方案:

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

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

小开

负的顶部边距可以达到这种效果，但是需要为每一页定制。例如，这个标记…

<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有完全的控制，那么这可能是一个选择。

小开

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

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

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

小开

在支持pre-flexbox用户代理(大多是老IE)——除非时，绝对没有办法通过CSS来实现你想要的:

  1. 您知道每个元素的精确渲染高度(如果是这样，您可以完全定位内容)。如果您正在处理动态生成的内容，那么您就不走运了。
  2. 你知道这些元素的确切数量。同样，如果您需要对动态生成的多个内容块执行此操作，那么您就不走运了，特别是当内容块超过三个左右时。

如果以上为真，那么您可以通过对元素的绝对定位来做您想做的事情

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

同样，如果你不知道至少#firstDiv的高度，你无法通过CSS单独做你想做的事情。如果这些内容是动态的，则必须使用javascript。

小开

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

小开

在CSS中，将第一个div向左或向右浮动。第二个div与第一个div一样向左或向右浮动。对于第二个div，应用与上面两个div相同的clear: left或right。

例如:

#firstDiv {
float: left;
}


#secondDiv {
float: left;
clear: left;
}
小开

或者为元素设置一个绝对位置，并通过从页面的边缘而不是对象的边缘声明页边距来去除页边距。使用%，因为它更适合其他屏幕尺寸等。这就是我如何克服这个问题的……谢谢，希望这是你想要的…

小开

我有一个更好的代码，我自己做的，它太大了，只是为了展示这两个东西……创建一个4x4表格，并垂直对齐多个单元格。

它不使用任何IE hack，没有垂直对齐:middle;在所有…

不用于垂直定心display-table, display:table-rom;显示:表格单元;

它使用了容器的技巧，有两个div，一个隐藏(位置不是正确的，但使父有正确的变量大小)，一个在隐藏之后可见，但顶部:-50%;因此，修正位置是很重要的。

看到div类做的把戏: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible < / p >

请抱歉使用西班牙语的类名(这是因为我说西班牙语，这是如此棘手，如果我使用英语，我就会迷路)。

完整代码:

<?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 />
*&nbsp;*&nbsp;*&nbsp;*
<br />
*&nbsp;*&nbsp;*&nbsp;*
<br />
*&nbsp;*&nbsp;*&nbsp;*
<br />
Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
The cell [3,1]
<br />
*&nbsp;*&nbsp;*&nbsp;*
<br />
*&nbsp;*&nbsp;*&nbsp;*
<br />
*&nbsp;*&nbsp;*&nbsp;*
<br />
Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;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&nbsp;is<br />cell&nbsp;[3,2]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This&nbsp;is<br />cell&nbsp;[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&nbsp;other is<br />the cell&nbsp;[3,4]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This&nbsp;other is<br />the cell&nbsp;[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>
小开

这个解决方案只使用CSS并使用可变内容

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { 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以正确地查看内容是很好的。

小开

我正在寻找一种方法来改变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
});
小开

这可以使用Flexbox来完成。

创建一个同时应用显示: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>

来源:

  • https://css-tricks.com/using-flexbox/ < a href = " https://css-tricks.com/using-flexbox/ " > < / >
  • < a href = " https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow Browser_compatibility " > https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow Browser_compatibility < / >
小开 
.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的解决方案(适用于IE10 +) -使用Flexbox的order属性:

演示: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>

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

小开

我有一个简单的方法。

<!--  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;}
}
小开

这只能用CSS来完成!

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

https://stackoverflow.com/a/25462829/1077230 < a href = " 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;
}
小开

使用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>
小开
只要通过指定display: flex和flex-direction : column为父div使用flex即可。 然后使用order来确定哪个子div在前面

小开

一个比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

与display: table;解决方案相反，此解决方案适用于.wrapper有任意数量的子对象。

小开

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

<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，你可以使用flex。

.price {
display: flex;
align-items: center;
justify-content: center;


flex-direction: row-reverse; //revert horizontally
//flex-direction: column-reverse; revert vertically
}
<div class="price">
<div>first block</div>
<div>second block</div>
</div>

小开

仅为移动设备订购，并保持桌面本机顺序:

/ / html

<div>
<div class="gridInverseMobile1">First</div>
<div class="gridInverseMobile1">Second</div>
</div>

/ / css

@media only screen and (max-width: 960px) {
.gridInverseMobile1 {
order: 2;
-webkit-order: 2;
}
.gridInverseMobile2 {
order: 1;
-webkit-order: 1;
}
}

结果:

Desktop: First | Second
Mobile: Second | First

来源:https://www.w3schools.com/cssref/css3_pr_order.asp

小开

你可以使用Flex

#wrapper {
display: flex;
flex-direction: column;
}


#firstDiv {
order: 1;
}


#secondDiv {
order: 0;
}
<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>

小开

如果您想反转子元素的显示顺序。我建议你用这个

direction: rtl; //从右向左

在父元素中设置此属性


提交答案