Having a structure of this type, you need to swap divas ( so that there are 213 and 312) using only Holy Island float. Additional wrappers are not allowed.

HTML

<div class="wrap oh"> <div class="test fl">1</div> <div class="test fl">2</div> <div class="test fl">3</div> </div>

Sss

 .fl {float:left} .fr {float:right} .no {float:none} .oh {overflow:hidden}

    2 answers 2

     .fl {float:left} .fr {float:right} .no {float:none} .oh {overflow:hidden} .wrap{ width: 30px; } .test{ display: inline-block; } 
     <div class="wrap oh"> <div class="test ">1</div> <div class="test fr">2</div> <div class="test fl">3</div> </div>

    if you add inline, then you can turn the steering wheel

     .fl {float:left} .fr {float:right} .no {float:none} .oh {overflow:hidden} .wrap{ width: 30px; } .test{ display: inline-block; } 
     <div class="wrap oh"> <div class="test ">1</div> <div class="test fl">2</div> <div class="test fr">3</div> </div>
    or only in this way, otherwise, the flow does not allow to perform such
     .fl {float:left} .fr {float:right} .no {float:none} .oh {overflow:hidden} .wrap{ width: 30px; } 
     <div class="wrap oh"> <div class="test fr">1</div> <div class="test no">2</div> <div class="test fr">3</div> </div> 

     .fl {float:left} .fr {float:right} .no {float:none} .oh {overflow:hidden} .wrap{ width: 30px; } 
     <div class="wrap oh"> <div class="test fl">1</div> <div class="test no">2</div> <div class="test fl">3</div> </div>

    • perfectly! Everything works, thank you! - Anna Kukhareva
     .fl {float:left} .fr {float:right} .no {float:none} .oh {overflow:hidden} .wrap{ display: table; clear: both; }
    • Please try to write more detailed answers. I am sure the author of the question would be grateful for your expert commentary on the code above. - Nicolas Chabanovsky ♦