如何在不改变html的情况下更改float div命令？

Question

我有3个浮动Div按以下顺序。

（1）（2）（3）

而且我想改变的div的顺序如下

（2）（1）（3）

请指导我如何我可以做到这一点吗？

Fiddle Example:

代码：

<div class="div1">1</div> 
<div class="div2">2</div> 
<div class="div3">3</div> 


div{ 
    height:50px; 
    text-align:center; 
    line-height:50px; 
} 
.div1{width:50%; background:red; float:left;} 
.div2{width:40%; background:yellow; float:left;} 
.div3{width:10%; background:green; float:left;} 

Answer 1

你可以做这种类型的编码

.div1{width:50%; background:red; display:inline-block;} 
.div2{width:40%; background:yellow; float:left;} 
.div3{width:10%; background:green; float:right} 

http://jsfiddle.net/u7psuzor/3/

Answer 2

你可以做使用jQuery

$('.div1').insertAfter('.div2'); 

DEMO

Answer 3

的您可以通过使用位置实现这一点：绝对有左百分比的属性，如沿如下：

http://jsfiddle.net/u7psuzor/8/

div { 
    height:50px; 
    text-align:center; 
    line-height:50px; 
} 

.div1 { 
    position: absolute; 
    width:50%; 
    background:red; 
    left: 40%; 
} 
.div2 { 
    position: absolute; 
    width:40%; 
    background:yellow; 
    left: 0% 
} 
.div3 { 
    position: absolute; 
    width:10%; 
    background:green; 
    left: 90%; 
} 

Answer 4

.div1{width:50%; background:red; position:absolute; right:0; top:0;} 
.div2{width:40%; background:yellow; position:absolute; left:0; top:0; } 
.div3{width:10%; background:green; position:absolute; left:40%; top:0;} 

Answer 5

在jquery中我们可以

$('document').ready(function(){ 
    $(".div1").attr('class','divTemp'); 
    $(".div2").attr('class','div1');  
    $(".divTemp").attr('class','div2');  
})