html - 如何在不更改 html 的情况下更改 float div 顺序？

Question

我有 3 个 float Div，顺序如下。

(1) (2) (3)

我想按如下方式更改 Divs 的顺序

(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/