<!DOCTYPE html>
<html lang="en">
<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>다단으로 편집하기</title>
<style>
* {margin:0; padding:0; box-sizing:border-box;}
/*.clear {clear:both;}벽을 생성*/
.parents {
display:flex;
justify-content:space-between; /*아이템즈의 수평 정렬*/
align-items:center; /*아이템즈의 수직 정렬*/
width:1000px; height:300px; margin:50px auto; /*중앙정렬*/
background:brown;
}
.parents p {
/*display:inline-block; (X)*/
/*float:left; /*박스를 왼쪽에서 오른쪽으로 다단으로 배치*/
width:300px; height:200px; padding:30px;
background:orange;
}
</style>
</head>
<body>
<div class="parents">
<p>많은 피어나듯이 사람들의 소학교 그러나 이네들은 가난한 버리었습니다. 피어나듯이 없이 지나가는 시인의 헤일 흙으로 이름자 나는 듯합니다. 어머니 이름과 풀이 못 둘 노루, 별빛이 내 무덤 있습니다.</p>
<p>많은 피어나듯이 사람들의 소학교 그러나 이네들은 가난한 버리었습니다. 피어나듯이 없이 지나가는 시인의 헤일 흙으로 이름자 나는 듯합니다. 어머니 이름과 풀이 못 둘 노루, 별빛이 내 무덤 있습니다.</p>
<p>많은 피어나듯이 사람들의 소학교 그러나 이네들은 가난한 버리었습니다. 피어나듯이 없이 지나가는 시인의 헤일 흙으로 이름자 나는 듯합니다. 어머니 이름과 풀이 못 둘 노루, 별빛이 내 무덤 있습니다.</p>
</div>
<!--<div class="clear"></div>-->
<div class="box"></div>
</body>
</html>
결과
