ボックスの並び順の指定
ボックスの並び順の指定
- floatの値によってコントロールすることができます
float: left;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float:left;</title> <style> #container { width: 50%; height: auto; } .box { height: 100px; text-align: center; line-height: 100px; } .wrapA>.box { width: 25%; float: left; box-sizing: border-box; } .wrapA { overflow: hidden; } .box1 { background: #FBE4EE; border: 4px solid #EA6094; } .box2 { background: #FFFBCB; border: 4px solid #FFE500; } .box3 { background: #EDF7FD; border: 4px solid #4188C9; } .box4 { background: #F3F7E0; border: 4px solid #B5D22F; } </style> </head> <body> <div id="container"> <div class="wrapA"> <div class="box box1">BOX1</div> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> <div class="box box4">BOX4</div> </div><!-- /.wrapA --> </div><!-- /#container --> </body> </html>
float: right;
.wrapA>.box { width: 25%; float: right; box-sizing: border-box; }