0
간단한 왼쪽 메뉴 레이아웃을 만들려고합니다.사이드 바이 사이드 div의 정렬이 올바르지 않습니다.
그러나 메인 콘텐츠가 포함 된 div는 사이드 메뉴와 나란히 완벽하게 정렬됩니다.
사이드 메뉴가 탐색 메뉴 바로 아래에 간격없이 놓여 있습니다.
내비게이션 메뉴와 약 1cm 주요 내용 사이에 작은 간격이 있습니다. 나는 어떤 차이도 내지 않은 모든 패딩과 마진을 제거했다.
누군가 내가 잘못하고있는 것을 볼 수 없으므로 누군가를 살펴볼 수 있습니까?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Left Menu Layout</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
<meta charset ="UTF-8">
</head>
<body class="body">
<header class="main-header">
<img src="Images/logo.png" alt="Logo" />
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="main-content">
<aside class="side-menu">
<p>ABC</p>
</aside>
<div class="content">
<article class="top-content">
<header>
<h2><a href="#" title="First Post">First Post</a></h2>
</header>
<footer>
<p class="post-info">This post if written by </p>
</footer>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p>
</article>
<article class="bottom-content">
<header>
<h2><a href="#" title="Second Post">First Post</a></h2>
</header>
<footer>
<p class="post-info">This post if written by </p>
</footer>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
</div>
</div>
<footer class="main-footer">
<p>Copyright © 2013</p>
</footer>
</body>
</html>
CSS
/* ===========================
======= Body style ========
=========================== */
body {
background-image: url('Images/bg.png');
color: #000305;
font-family: Arial;
text-align: left;
margin: 0;
padding: 0;
}
.body {
clear: both;
margin: 0 auto;
width: 960px;
}
/* ===========================
======= Anchor style ======
=========================== */
a {
outline: 0;
}
a img {
border: 0px;
text-decoration: none;
}
a:link, a:visited {
color: #CF5C3F;
text-decoration: none;
}
a:hover, a:active {
background-color: #CF5C3F;
color: #fff;
text-decoration: none;
}
/* ===========================
===== Main Navigation =====
=========================== */
.main-header nav {
background: #666;
height: 40px;
}
.main-header nav ul li {
float: left;
display: inline;
}
.main-header nav a:link, .main-header nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
text-decoration: none;
}
/* ===========================
======= Content Area ======
=========================== */
.main-content {
overflow: hidden;
}
.top-content {
background-color: #FFF;
}
.bottom-content {
background-color: #FFF;
}
.content {
width: 682px;
float: left;
}
.post-info {
font-style: italic;
color: #999;
font-size: 85%;
}
/* ===========================
======== Sidebar ==========
=========================== */
.side-menu {
width: 268px;
float: left;
background-color: #FFF;
}
주로 h2 때문에 http://jsfiddle.net/LUp5f/1/ – Huangism