html - 仅使用 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 位于左侧的上方。我想交换它们，将左边的显示在右边的上方，保持容器属性(自动计算的高度)。

换句话说，我想只使用 CSS 来实现与通过交换 html 代码中的两个 div 获得的结果相同的结果。

仅使用 css 是否可行？ [我梦想着一个 float: bottom 属性 :)]

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