<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 150px;
height: 150px;
background: orange;
margin: 10px;
border-radius: 10px;
font-size: 50px;
font-weight: 700;
/* text 정중앙 정령(x축,y축) */
text-align: center; /*(x축)*/
line-height:150px; /* y축 : 줄높이를 세로길이와 동일하게*/
float:right;
}
.box:nth-child(4n+1)
{
/* float 해제 */
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
</div>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_박스나열(중첩,마진 계산하기)_연습문제_22.04.11(mon) (0) | 2022.04.11 |
|---|---|
| CSS_박스 띄우기_중첩레이아웃(float)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_박스 띄우기_단순띄우기(float)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_background(img연습문제)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_background(attachment)_22.04.11(mon) (0) | 2022.04.11 |