썸네일 블록 레이아웃
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css">
<title>11월 6일 연습문제</title>
<style>
#container {
width: 600px;
padding: 10px 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 30px auto;
}
/* 모든 자식 요소에 float 스타일 속성이 설정된 경우 부모 요소의 영역을 잡아주기 위해*/
#container::after { content: ""; display: block; clear: both;}
#container > div {
/* 형제 요소들을 나란히 배치하기 위해 float 스타일 속성 설정 */
float: left;
width: 290px;
height: 190px;
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
/* margin-top: 10px;
margin-bottom: 10px; */ /* 12번째 줄 주목 */
overflow: hidden;
}
#container > div:nth-child(1), #container > div:nth-child(2) {
margin-bottom: 20px;
}
#container > div:nth-child(odd) {
margin-right: /*10px*/20px;
}
/* #container > div:nth-child(even) {
margin-left: 10px;
} */
#container > div > img {
float: left;
margin: 0 10px 10px 0;
}
#container > div > p {
line-height: 20px;
}
</style>
</head>
<body>
<div id="container">
<div>
<img src="https://place-hold.it/120x80" alt="Thumnail">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc in ligula a augue commodo molestie.
Vivamus in lobortis magna, eget fermentum ligula. </p>
</div>
<div>
<img src="https://place-hold.it/120x80" alt="Thumnail">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc in ligula a augue commodo molestie.
Vivamus in lobortis magna, eget fermentum ligula. </p>
</div>
<div>
<img src="https://place-hold.it/120x80" alt="Thumnail">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc in ligula a augue commodo molestie.
Vivamus in lobortis magna, eget fermentum ligula. </p>
</div>
<div>
<img src="https://place-hold.it/120x80" alt="Thumnail">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc in ligula a augue commodo molestie.
Vivamus in lobortis magna, eget fermentum ligula. </p>
</div>
</div> <!-- /#container-->
</body>
</html>
