매일코딩/HTML&CSS3
2.레이아웃 - 박스가로정렬
인생여희
2016. 11. 1. 18:07
반응형
1.
1. float를 left로 지정하면 박스는 자신이 가진 너비만큼 차지하며 순서대로 왼쪽에 붙어 위치를 잡는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>샘플</title> <style> .box1{border:4px solid green; line-height: 200px;} .box2{border:4px solid green; line-height: 200px; float:left} .box3{border:4px solid green; line-height: 200px; float:left} .box4{border:4px solid green; line-height: 200px;} .boxA{border:4px solid RED; line-height: 200px;} </style> </head> <body> <div class="box1" > BOX1 </div> <div class="boxA"> <div class="box2"> BOX2 </div> <div class="box3"> BOX3 </div> </div> <div class="box4"> BOX4 </div> </body> </html> | cs |
2. clearfix 라고 하면 float을 지정한 요소가 이후의 요소에게 영향을 주지 않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>샘플</title> <style> .box1{border:4px solid green; line-height: 200px;} .box2{border:4px solid green; line-height: 200px; float:left} .box3{border:4px solid green; line-height: 200px; float:left} .box4{border:4px solid green; line-height: 200px;} .boxA:after{border:4px solid RED; line-height: 200px; content:""; display:block; clear:both} </style> </head> <body> <div class="box1" > BOX1 </div> <div class="boxA"> <div class="box2"> BOX2 </div> <div class="box3"> BOX3 </div> </div> <div class="box4"> BOX4 </div> </body> </html> | cs |
3. 간단하게 박스의 너비를 지정해 준다.
1 2 3 4 5 6 7 8 9 10 11 | <style> .box1{border:4px solid green; line-height: 200px;} .box2{border:4px solid green; line-height: 200px; float:left; width:49.5%} .box3{border:4px solid green; line-height: 200px; float:left; width:49.5%} .box4{border:4px solid green; line-height: 200px;} .boxA:after{border:4px solid RED; line-height: 200px; content:""; display:block; clear:both} </style> | cs |
반응형