仅使用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.我想交换它们,显示左边的一个,保持容器属性(自动计算高度).

用不同的词来解释它,我想通过交换html代码中的两个div来获得与CSS相同的结果.

只有css才有可能吗？[我在梦想浮动:底部属性:)]

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

Answer 1

根据这个和许多其他人,我担心你不能只用css交换,但我找到了一些可以帮助你在这种情况下,这就是这个

所以这将是你对小提琴的编辑

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