20.12.04 10:08 작성
·
175
1
제가 직접 레이아웃을 짜고 만드는걸 시도해 봤는데 아래와 같이 이미지가 들어간 박스가 보라색 박스 안으로 안들어가요. 집어넣고 싶은데 어떻게 해야 하나요?
아래는 소스 코드에요.
------------------html소스-------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>occultcafeadytum</title>
<link rel="stylesheet" href="css/style6.css">
</head>
<body>
<div class="container">
<header><h3>점술카페 아디툼</h3></header>
<section>
<div class="box1">타로</div>
<div class="box2">사주</div>
<div class="box3">손금</div>
<div class="box4">관상</div>
<article><img src="images/angel-01.jpg.jfif"></article>
</section>
<footer></footer>
</div>
</body>
</html>
---------------------css소스-----------------------
.container {
width:1200px;
border:1px solid red;
text-align:center;
}
header {
border:1px solid red;
}
section{
background-color:purple;
height:400px;
}
section div{
background-color:gray;
width:200px;
border:1px solid red;
}
.box1{
height:100px;
}
.box2{
height:100px;
}
.box3{
height:100px;
}
.box4{
height:100px;
}
article {
border:1px solid red;
width:300px;
height:300px;
}
답변 1
1
2020. 12. 05. 17:55
section div에 float: left를 주셔야 가로 배치됩니다.
가로 배치를 위한 css 속성이 없습니다.