html – 仅使用css交换div顺序

概述我想知道是否可以仅使用css以反转顺序显示两个div元素. 没有 HTML更改或 javascript代码,只是CSS. 我有以下html： <div id="container" class="clearfix"> <div id="right-sidebar">Right</div> <div id="left-sidebar">Left</div></div> 这个当前的c 我想知道是否可以仅使用CSS以反转顺序显示两个div元素.
没有 HTML更改或 javascript代码,只是CSS.

我有以下HTML：

<div ID="container" >    <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/

解决方法 根据 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;}

总结

以上是内存溢出为你收集整理的html – 仅使用css交换div顺序全部内容，希望文章能够帮你解决html – 仅使用css交换div顺序所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。