仅使用 css 交换 div 顺序

Question

我想知道是否可以仅使用 css 以倒序显示两个 div 元素。 无需更改 html 或 javascript 代码，只需 css。

我有以下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？ [我梦想有一个浮动：底部属性:)]

http://jsfiddle.net/mT7JJ/1/

Answer 1

根据this 和许多其他人的说法，恐怕你不能只用 css 交换，但我找到了在这种情况下可以帮助你的东西，那就是 this

所以这将是您在 fiddle

上的编辑

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

Answer 2

我能想到的唯一想法是相对/绝对位置。但它不会真正有效

Answer 3

如前所述，一种现代解决方案是弹性布局。

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

webkit demo

我只是将容器倒置旋转，然后旋转内部 div 以使它们看起来不错。它是在悬停中完成的，以显示净效果。 由于 clearfix，悬停有点不稳定，但这与此处无关。

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

我喜欢回答一个被宣布为不可能的问题:-)

Answer 4

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

}

check this left div above right div

Answer 5

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

Answer 6

没有专家和老问题，但用例在特定条件下适用于我来回答这个问题：“仅使用 css 交换 div 顺序”

我的回答几乎完全基于 Harry 在这里的回答 https://stackoverflow.com/a/31366853/3913379（原始答案 v2）并在子 div 大小相同的条件下（用例是主 div 包含 两个 带有链接图标和文本的 div）。

所以要使用 CSS only 从左到右交换两个 div，反之亦然，我在 X 轴上使用了一个 css 变换（变换： 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 结构不变（JS/JQuery 监听器不受影响，例如链接的 onClick(...) ） 这在某些继承的特殊样式下可能会失败，但简单的情况对我来说效果很好。

样式可以应用在 HEAD 标记或 div 上的内联，也可以通过 JS 动态应用（例如通过单击按钮或类似的方式交换两个图标/图像）

Answer 7

使用 css 有两种方法可以做到这一点。 Flex 和网格。

弹性：

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