반응형
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 51 52 53 | <!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; float:left; width:32.5%} .box3{border:4px solid green; line-height: 200px;float:left; width:32.5%} .box2{border:4px solid green; line-height: 200px; float:left; width:32.5%} .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="boxA"> <div class="box1" > BOX1 </div> <div class="box2"> BOX2 </div> <div class="box3"> BOX3 </div> </div> <div class="box4"> BOX4 </div> </body> </html> | cs |
가로 정렬할 박스의 개수 변경
반응형
'매일코딩 > HTML&CSS3' 카테고리의 다른 글
| 5.레이아웃 - 박스너비 고정하기 (0) | 2016.11.02 |
|---|---|
| 4.레이아웃 - 칼럼 탈락 현상 (0) | 2016.11.02 |
| 3.레이아웃 - 박스너비 지정 (0) | 2016.11.02 |
| 2.레이아웃 - 박스가로정렬 (0) | 2016.11.01 |
| 1.레이아웃 - 박스정렬 (0) | 2016.11.01 |
댓글