如何用CSS重新排序div ?

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div when they are not in that order in the HTML? Both divs contain data that varies in height and width.

给定一个模板，由于其他需求而不能修改HTML，那么如何才能在HTML中不按此顺序显示(重新排列)另一个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.

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

23 个解决方案

#1

This solution uses only CSS and works with variable content

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

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

#2

A CSS-only solution (works for IE10+) – use Flexbox's order property:

只有css的解决方案(适用于IE10+)——使用Flexbox的订单属性:

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。

#3

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());
});

#4

This can be done using Flexbox.

这可以使用Flexbox完成。

Create a container that applies both display:flex and flex-flow:column-reverse.

创建一个应用两个显示的容器: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:

来源:

• https://css-tricks.com/using-flexbox/
• https://css-tricks.com/using-flexbox/
• 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

#5

There is absolutely no way to achieve what you want through CSS alone while supporting pre-flexbox user agents (mostly old IE) -- unless:

在支持前flexbox用户代理(主要是老IE)的时候，绝对没有办法通过CSS实现你想要的效果，除非:

1. 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.
2. 您知道每个元素的渲染高度(如果是，您完全可以定位内容)。如果你处理的是动态生成的内容，那你就不走运了。
3. 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.
4. 你知道这些元素的确切数量。同样，如果你需要对一些动态生成的内容块进行操作，那么你就没有运气了，特别是如果有超过3个这样的内容。

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。

#6

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后面有一些内容……

#7

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文档css3移动到

#8

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，那么这可能是一个选项。

#9

With CSS3 flexbox layout module, you can order divs.

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

#10

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的评论很可能会被采用。

#11

you just need this! in css float first div by left or right. float second div by left or right same as first. clear left or right same as above two div for second div. for example:

你只需要这个!在css中，第一个div用左或右对齐。将第二个div按左或右浮动与第一个div相同。左对齐或右对齐，与第二div的两个div相同。

#firstDiv {
    float: left;
}

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

Have fun my friend.

玩得开心我的朋友。

#12

This can be done with CSS only!

这只能用CSS完成!

Please check my answer to this similar question:

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

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

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

I don't want to double post my answer but the short of it is that the parent needs to become a flexbox element. Eg:

我不想重复我的答案，但缺点是父母需要成为一个灵活的元素。例如:

(only using the webkit vendor prefix here.)

(此处仅使用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;
}

Then, swap divs around by indicating their order with:

然后，交换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;
}

#13

I was looking for a way to change the orders of the divs only for mobile version so then I can style it nicely. Thanks to nickf reply I got to make this piece of code which worked well for what I wanted, so i though of sharing it with you guys:

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

#14

A solution with a bigger browser support then the flexbox (works in IE≥9):

解决方案与一个更大的浏览器支持那么flexbox(即≥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

In contrast to the display: table; solution this solution works when .wrapper has any amount of children.

与显示相反:表格;当.wrapper含有任意数量的子元素时，这个解决方案就能起作用。

#15

Just use flex for the parent div by specifying display: flex and flex-direction : column. Then use order to determine which of the child div comes first

只需通过指定display: flex和flex-direction:列，就可以为父div使用flex。然后使用order来确定哪个子div首先出现

#16

CSS really shouldn't be used to restructure the HTML backend. However, it is possible if you know the height of both elements involved and are feeling hackish. Also, text selection will be messed up when going between the divs, but that's because the HTML and CSS order are opposite.

CSS真的不应该用来重组HTML后端。然而，如果你知道这两种元素的高度，你就有可能感到被黑客攻击。此外，在div之间进行文本选择时也会出错，但这是因为HTML和CSS顺序是相反的。

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

Where XXX and YYY are the heights of firstDiv and secondDiv respectively. This will work with trailing elements, unlike the top answer.

其中XXX和YYY分别为firstDiv和secondDiv的高度。与上面的答案不同，这将使用尾随元素。

#17

I have a much better code, made by me, it is so big, just to show both things... create a 4x4 table and vertical align more than just one cell.

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

It does not use any IE hack, no vertical-align:middle; at all...

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

It does not use for vertical centering display-table, display:table-rom; display:table-cell;

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

It uses the trick of a container that has two divs, one hidden (position is not the correct but makes parent have the correct variable size), one visible just after the hidden but with top:-50%; so it is mover to correct position.

它使用一个具有两个div的容器的技巧，一个隐藏的(位置不是正确的，但是让父类有正确的变量大小)，一个可以在隐藏之后看到，但是顶部是:-50%;所以正确的位置是最重要的。

See div classes that make the trick: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

参见div类:BloqueTipoContenedor bloquetipocontenedor_verticalmentectradentrado bloquetipocontenido_oculto bloquetipocontenido_可见光

Please sorry for using Spanish on classes names (it is because i speak spanish and this is so tricky that if i use English i get lost).

请原谅我在课堂上使用西班牙语(因为我说的是西班牙语，这太棘手了，如果我用英语就会迷路)。

The full code:

完整的代码:

<?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>

#18

Little late to the party, but you can also do this:

参加聚会的时间不会太迟，但你也可以这样做:

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

#19

Or set an absolute position to the element and work off the margins by declaring them from the edge of the page rather than the edge of the object. Use % as its more suitable for other screen sizes ect. This is how i overcame the issue...Thanks, hope its what your looking for...

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

#20

For CSS Only solution 1. Either height of wrapper should be fixed or 2. height of second div should be fixed

对于CSS唯一的解决方案1。包装的高度应该是固定的还是2。第二节的高度应该固定

#21

.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;
}

#22

It is easy with css, just use display:block and z-index property

css很简单，只需使用display:block和z-index属性。

Here is an example:

这是一个例子:

HTML:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

CSS:

CSS:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

Edit: It is good to set some background-color to the div-s to see things properly.

编辑:最好给女演员设置一些背景色，这样才能看得更清楚。

#23

I have a simple way to do this.

我有一个简单的方法。

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