使用CSS仅交换div的顺序

Question

我想知道是否可以仅使用CSS，在不改变HTML或JavaScript代码的情况下以相反的顺序显示两个div元素。 以下是我的HTML代码：

<div id="container" class="clearfix">
    <div id="right-sidebar">Right</div>
    <div id="left-sidebar">Left</div>
</div>

并且这是当前的CSS：

#container {
    width: 200px;
    border: 2px solid blue;
    padding: 2px;
    margin: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#left-sidebar, #right-sidebar {
    width: 150px;
    padding: 2px;
}

#left-sidebar {
    border: 2px solid red;
    float: left;
}

#right-sidebar {
    border: 2px solid green;
    float: right;
}

结果显示右边的div在左边的上面。我想交换它们，将左边的div显示在右边的上面，同时保留容器的属性（自动计算高度）。

换句话说，我希望只使用CSS就能实现与在html代码中交换两个div时相同的结果。

只使用CSS是否可能实现？（我梦想着有一个float: bottom属性：)） http://jsfiddle.net/mT7JJ/1/

- Lorenzo Marcon

---

请查看flexbox http://weblog.bocoup.com/dive-into-flexbox/ - kalley

Answer 1

根据 这里 和其他许多来源，恐怕您无法仅使用CSS进行交换，但我找到了一些可以在此情况下帮助您的东西，那就是 这个。

所以，这将是您在 fiddle 上的编辑。

#container {
 display: table; width: 200px; 
 border:1px red solid;
}
#left-sidebar {
 display: table-header-group;
}
#right-sidebar {
 display: table-footer-group;
}

- user1979270

Answer 2

我能想到的唯一方法是使用相对/绝对定位。但效率不会真正高效。

- GuiGreg

Answer 3

有一个现代的解决方案，正如评论所述，那就是弹性布局。

另一个棘手的可能性是使用变换。

webkit演示

我只是将容器倒置，然后旋转内部div以使它们看起来正常。这是在悬停时完成的，以显示净效果。 由于清除浮动，悬停有点不稳定，但这在这里不重要。

#container:hover {
    -webkit-transform: rotateX(180deg);
}
#container:hover div {
    -webkit-transform: rotateX(180deg);
}

我喜欢回答被认为不可能的问题 :-)

- vals

Answer 4

不是专家，而且这是一个老问题，但在特定条件下适用于我的用例，以回答这个问题：“仅使用CSS交换div顺序”。

我的答案基本上基于Harry在这里的答案 https://dev59.com/4ozda4cB1Zd3GeqPs-w_#31366853（原始答案v2），并且现在已经测试过（Chrome / FF），条件是子div具有相同的大小（用例是主Div包含 TWO 个带链接图标和文本的div）。

因此，要使用仅CSS将TWO个div左右互换位置，我在X轴上使用了CSS变换（transform：translateX），如下所示：

<STYLE type="text/css">
      #Child1Div {transform: translateX(100%);}
      #Child2Div  {transform: translateX(-100%);}
</STYLE>


<div id="MotherDiv" >
    <div id="Child1Div">Context of child one</div>
    <div id="Child2Div">Content of child two</div>
</div>

因此，在某些情况下，注意使用百分比和负值以获取基本上“交换”的效果。HTML结构保持不变（例如链接的onClick(...)），JS / JQuery监听器也不受影响。

这可能在某些继承的特殊样式下失效，但对于我来说，简单的情况效果很好。

样式可以应用于HEAD标记或内联于div中，也可以通过JS动态应用（例如通过单击按钮交换两个图标/图片等）

- Diego1974

Answer 5

有两种方法使用CSS实现。弹性布局和网格布局。

弹性布局：

#container {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   justify-content: flex-start;
   flex-direction: row-reverse;
 }
 

网格：

#container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr))      
}
#left-sidebar {
  order 2
}
#right-sidebar {
  order 1
}

- Pablopvsky

Answer 6

<div id="container" class="clearfix">
    <div id="left-sidebar">Left</div>
    <div id="right-sidebar">Right</div>

</div>
#container {
    width: 200px;
    border: 2px solid blue;
    padding: 2px;
    margin: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#left-sidebar, #right-sidebar {
    width: 150px;
    padding: 2px;
}

#left-sidebar {
    border: 2px solid red;

}

#right-sidebar {
    border: 2px solid green;

}

检查左边的div在右边的div上面

- sun

---

谢谢，但这不是我想要的。我想看到“Left” div在“Right”上面。 - Lorenzo Marcon

@lorenzo.marcon，请检查我的编辑。我不知道这是否符合您的期望？ - sun

嗯，好的，但是你改变了HTML :) 我在想是否可能仅通过更改CSS来实现。 - Lorenzo Marcon

我看到了，你也改变了HTML，这不是我要求的。无论如何还是谢谢。 - Lorenzo Marcon

非常抱歉，是我的错。我本来是在回答 Raj 的问题，但你给出了我需要的答案 :) - Lorenzo Marcon

Answer 7

仅使用CSS：

#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;

}

<div id="blockContainer">
 <div id="blockA">Block A</div>
 <div id="blockB">Block B</div>
 <div id="blockC">Block C</div>
</div>

http://jsfiddle.net/hLUHL/713/

- iqmaker