webkit demo

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

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

仅使用css交换div顺序

4 个答案:

webkit demo