Question

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

（1）（2）（3）

我想改变Div的顺序如下

（2）（1）（3）

请指导我如何实现这一目标？

代码：

<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

您可以通过使用position：absolute以及左百分比属性来实现此目的，如下所示：

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 3

您可以使用jquery

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

<强> DEMO

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

如何在没有任何html更改的情况下更改float div顺序？

5 个答案: