-
질문 & 답변
카테고리
-
세부 분야
자격증 (디자인)
-
해결 여부
해결됨
왜 sns가 오른쪽으로 안가고 밑으로 쳐지는지 모르겠어요
21.08.23 01:31 작성 조회수 122
1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>부여 가을연꽃축제</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="left">
<header>
<div class="header-logo"></div><!--.header-logo-->
<div class="navi"></div><!--.navi-->
</header>
</div><!--.left-->
<div class="right">
<div class="slide">
<div></div>
</div><!--.slide-->
<div class="items">
<div class="news"></div><!--.news-->
<div class="gallery"></div><!--.gallery-->
<div class="shortcut"></div><!--.shortcut-->
</div><!--.items-->
<footer>
<div class="copyright">
</div><!--.copyright-->
<div class="sns">
<div></div>
<div></div>
</div><!--.sns-->
</footer>
</div><!--.right-->
</div>
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
</body>
</html>
@charset 'utf-8';
*{
padding: 0;
list-style: none;
text-decoration: none;
}
body{
margin:0;
background-color: #fff;
color:#222328;
font-size: 15px;
}
.container{
border: 1px solid red;
width:1000px;
}
.container > div{
border: 1px solid blue;
float: left;
box-sizing: border-box;
}
.left{
width:200px;
}
.right{
width:800px;
}
header{
}
header > div{}
.header-logo{
border: 1px solid green;
height: 100px;
}
.navi{
border: 1px solid red;
height: 400px;
}
.slide{}
.slide > div{
border: 1px solid green;
height: 350px;
}
.items{
overflow: hidden;
}
.items > div{
border: 1px solid pink;
height: 200px;
float: left;
box-sizing: border-box;
}
.news{
width: 400px;
}
.gallery{
width: 250px;
}
.shortcut{
width: 250px;
}
footer{
overflow: hidden;
}
footer > div{
border: 1px solid blue;
height: 100px;
float:left;
box-sizing: border-box;
}
.copyright{
width:600px;
}
.sns{
width:200px;
}
.sns div{
border: 1px solid #000;
height: 50px;
}
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2021.08.23
C타입하실 때 주의하실 부분인데 아래에 굵은 글씨로 된 보더를 삭제하시면 됩니다.
이유는 . right라는 div가 왼쪽 오른쪽 1픽셀의 보도를 갖고 있어서 들어갈 수 있는 공간이 798 픽셀 밖에 안되기 때문에 내부에 800 픽셀이 못 들어가는 거예요.
와이어 프레임 제작 후 어차피 보더는 삭제할 거니까 아래 굵은 글씨 보도 삭제하시면 다 가로배치 정상적으로 됩니다.
.container > div{
border: 1px solid blue;
float: left;
box-sizing: border-box;
}
답변 1