Question

我正在尝试创建一个简单的左菜单布局。

但是，包含主要内容的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 &copy; 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; 
}

Answer 1

<p>始终有自己的保证金。减少<p> <aside>周围的边距，它应该可以解决问题。

如果您需要将其拉近顶部导航，则可以对<h2>中的<header>执行此操作。

并排div的对齐不正确

1 个答案: