1
그래서 세 개의 열이 완벽하게 정렬되도록 일부 열 코드를 시도하고 있습니다.요소 위치가 제대로 작동하지 않습니다.
http://i.imgur.com/p4ln5Ri.png
이 내가 사용하는 CSS 코드는 : 나는 그것을 시도 할 때 불행하게도, 난과 같이, 중간 열 위에 떠있는 왼쪽과 오른쪽 열을 얻었다. 참고로 #left는 왼쪽 열, #main은 가운데, #right는 오른쪽 열을 의미합니다.
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3-Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="ThreeColumnProjectCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div>
<div class="column">
<h1>Left</h1>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul>
</div>
<div class="column">
<h1>Header - Main</h1>
<p>Ullamco laboris nisi sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, velit esse cillum dolore. Sunt in culpa ut enim ad minim veniam, consectetur adipisicing elit. In reprehenderit in voluptate qui officia deserunt sed do eiusmod tempor incididunt.</p>
<p>Excepteur sint occaecat duis aute irure dolor sunt in culpa. Quis nostrud exercitation consectetur adipisicing elit. In reprehenderit in voluptate lorem ipsum dolor sit amet, cupidatat non proident. Ut labore et dolore magna aliqua.</p>
<p>Quis nostrud exercitation qui officia deserunt eu fugiat nulla pariatur. Consectetur adipisicing elit, lorem ipsum dolor sit amet, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Velit esse cillum dolore qui officia deserunt ut labore et dolore magna aliqua.</p>
<p>In reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Excepteur sint occaecat lorem ipsum dolor sit amet, quis nostrud exercitation.</p>
<p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Ullamco laboris nisi ut enim ad minim veniam, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, velit esse cillum dolore.</p>
</div>
<div class="column">
<h1>Right</h1>
<p>Sed do eiusmod tempor incididunt excepteur sint occaecat duis aute irure dolor.</p>
</div>
</div>
</body>
</html>
CSS :
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
#left {
position: absolute;
left:0px;
top:100px;
width:200px;
background:#fff;
border:1px solid #000;
padding: 0px 5px;
}
#right {
position: absolute;
right:0px;
top:100px;
width:200px;
background:#fff;
border:1px solid #000;
padding: 0px 5px;
}
#header {
background:#fff;
/* IE 5.5 */
height:81px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
/* IE 6 */
height: 99px;
}
html]body #banner {
/* Mozilla and Safari */
height: 99px;
}
#main {
background:#fff;
/* these two margins affect IE 5.5 */
margin-left: 200px;
margin-right:200px;
border:1px solid #000;
padding: 0px 5px;
voice-family: "\"}\"";
voice-family: inherit;
/* these two margins affect IE 6 */
margin-left: 200px;
margin-right:200px;
}
html]body #main {
/* these two margins affect Mozilla and Safari */
margin-left: 212px;
margin-right:212px;
}
#footer {
width: 100%;
height: 35px;
border: solid #000000;
border-width: 1px 0;
margin: 0;
}
내가 도움을 주셔서 감사합니다.
또한 HTML 마크 업을 게시하시기 바랍니다. –
나는 HTML에서 편집했다 – Cdore