3
머리글, 왼쪽, 오른쪽 및 바닥 글 div 블록을 포함하는 간단한 웹 페이지 레이아웃을 만들었습니다.CSS를 사용하여 오른쪽 화면 영역에 div 블록을 넣는 방법은 무엇입니까?
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="body">
<div class="header">
<p>Header</p>
</div>
<div class="left">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</div>
<div class="right"></div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
이것은 CSS 스타일은 다음과 같습니다 :
이
는 HTML 코드입니다 웹 페이지는 다음과 같습니다body {
margin: 0px;
}
.header {
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.left {
margin-top: 5px;
width: 1000px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.article {
margin: 50px;
height: 400px;
border-style: solid;
border-color: green;
border-width: 5px;
border-radius: 3px;
}
.footer {
margin-top: 5px;
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
p {
text-align: center;
}
: 
을하지만 난을 추가 할 때 왼쪽 블록은 그림처럼 보이지 않습니다. http://jsfiddle.net/khbTg/
가 어떻게이 사진에 같은 노란색 영역에서 왼쪽 DIV 블록을 넣어 수 있습니다 - jsFiddle에
.right {
margin-top: 5px;
width: 200px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
float: right;
}
DEMO : 나는이 CSS 코드를 사용할 수 있습니까? 어떤 도움을 주셔서 감사합니다.
jsfiddle – SaturnsEye
@Adsy [참조] (HTTP를 만드십시오 : //jsfiddle.net/VEINHORN/NAZy5/) – veinhorn