• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

레이아웃을 만들어 봤는데 문제가 있어요.

20.12.04 10:08 작성 조회수 143

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

section div에 float: left를 주셔야 가로 배치됩니다.

가로 배치를 위한 css 속성이 없습니다.