如何仅使用CSS重新排序div？

HTML CSS

蛋蛋A

2020-03-24

给定一个模板，其中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的解决方案（如果不成功的话，可能必须与其他解决方案配合使用）。

此后还有其他元素。考虑到我展示的场景有限，提到了一个很好的建议-考虑到这可能是最好的答案，但是我还希望确保遵循此条件的元素不会受到影响。

第3326篇《如何仅使用CSS重新排序div？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共19个回答

神无逆天 2020.03.24

对于仅CSS解决方案1.应该固定包装纸的高度，或者2.应该固定第二个div的高度

LGil 2020.03.24

使用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以便正确查看内容。

Stafan 2020.03.24

或为元素设置绝对位置，并通过从页面边缘而非对象边缘声明边缘来消除边缘。使用％作为其更适合其他屏幕尺寸等。这就是我克服问题的方式...谢谢，希望它能为您提供帮助...

小胖Itachi 2020.03.24

如果仅使用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>

番长猴子 2020.03.24

聚会晚了一点，但您也可以这样做：

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

宝儿小小 2020.03.24

只需通过指定display: flex和将flex用于父级div flex-direction : column。然后使用order确定哪个子div首先出现

Eva神乐 2020.03.24

我有一个更好的代码，由我自己编写，它是如此之大，只是为了展示两件事……创建一个4x4的表，并垂直对齐多个单元。

它不使用任何IE hack，也不使用vertical-align：middle; 完全没有

它不用于垂直居中显示表display：table-rom; 显示：表格单元格；

它使用了一个具有两个div的容器的技巧，一个是隐藏的（位置不正确，但是使父级具有正确的变量大小），一个在隐藏之后可见，但顶部为-50％；因此它是可移动的正确位置。

请参阅可完成此操作的div类：BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

请为在班级名称上使用西班牙语而感到抱歉（这是因为我会说西班牙语，这非常棘手，如果我使用英语，我会迷路）。

完整代码：

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

梅Davaid 2020.03.24

CSS确实不应该用于重组HTML后端。但是，如果您知道所涉及的两个元素的高度并感到有些刺破，则有可能。另外，在div之间切换时，文本选择会变得混乱，但这是因为HTML和CSS的顺序相反。

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

其中XXX和YYY分别是firstDiv和secondDiv的高度。与顶部答案不同，这将适用于尾随元素。

樱达蒙 2020.03.24

一种具有比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有任意数量的子代时有效。

Tom西门 2020.03.24

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

例如：

#firstDiv {
    float: left;
}

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

十三 2020.03.24

这只能用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;
}

阿飞 2020.03.24

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

Itachi神无 2020.03.24

负的上边距可以实现此效果，但是需要为每页自定义它们。例如，此标记...

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

Mandy 2020.03.24

好吧，有了一些绝对的定位和一些模糊的边距设置，我可以接近，但这并不是完美的或漂亮的：

#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的评论应该被采纳。

猴子古一阳光 2020.03.24

这可以使用Flexbox完成。

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

资料来源：

斯丁JinJin 2020.03.24

在支持flexbox之前的用户代理（主要是旧版IE）的同时，绝对不可能仅通过CSS来实现所需的功能- 除非：

您知道每个元素的确切渲染高度（如果这样，则可以绝对定位内容）。如果您要处理动态生成的内容，那么您就不走运了。
您知道这些元素的确切数量。同样，如果您需要对动态生成的几块内容执行此操作，那么您将很不走运，尤其是在三个以上的情况下。

如果上述条件成立，那么您可以通过绝对定位元素来做您想要做的事情-

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

同样，如果您至少不知道#firstDiv的高度，则无法仅通过CSS来完成所需的操作。如果其中任何内容是动态的，则必须使用javascript。

蛋蛋 2020.03.24

这是一个解决方案：

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

但是我怀疑您有一些内容紧随包装器部门...

乐米亚 2020.03.24

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

蛋蛋猿 2020.03.24

该解决方案仅使用CSS并处理可变内容

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android