Question

为什么我的旁边标签位于页面底部，它们不会出现在该部分的旁边，为什么会这样？我想要彼此相邻的3列。

* {
    margin: 0px;
    padding: 0px;
    font-family: 'Source Sans Pro', sans-serif;
}

#header {
    width: 100%;
    height: 200px;
    background-color: lightgray;
}

#header h1 {
    font-size: 67px;
    text-align: center;
    padding-top: 50px;
}

#main_body {
    width: 90%;
    height: auto;;
    margin-left: auto;
    margin-right: auto;
}

#section {
    width: 60%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid black;
}

#aside_right {
    width: 10%;
    height: auto;
    float: left;
    border: 3px solid black;
}

#aside_left {
    width: 10%;
    height: auto;
    float: right;
    border: 3px solid black;
}

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Clean Template</title>
        <link rel="stylesheet" href="assets/css/style.css">
    </head>
    <body>
        <header id="header">
            <h1>Clean Template</h1>
        </header>
        <nav id="nav">
            <ul class="menu">
                <li class="selected"><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <!-- Main Body Beginning -->
        <div id="main_body">
            <section id="section">
                <article class="article_1">
                    <hgroup class="article_hgroup">
                        <h1>Article Title</h1>
                        <h2>Article Subtitle</h2>
                    </hgroup>
                    <p class="article_p">
                        Aut aute deserunt admodum, irure cernantur comprehenderit qui vidisse cillum 
                        elit doctrina quem de velit litteris in consectetur. Cernantur sint aliqua 
                        deserunt varias ubi veniam tempor distinguantur. Occaecat do occaecat ad elit 
                        vidisse de occaecat. Aut fugiat sempiternum, ut tamen veniam sint senserit de 
                        laboris ita commodo, a eram admodum ad nam de praesentibus, quo aut cillum amet 
                        minim, summis eiusmod e enim fugiat, culpa nescius familiaritatem. Si o 
                        transferrem, consequat e voluptate ea consequat legam tempor id qui dolor in 
                        labore, nostrud an minim consequat, senserit labore legam cupidatat lorem, quis 
                        iis ad aliqua tempor in de esse occaecat. Legam quibusdam ubi quem elit, ex 
                        consequat non doctrina e si noster proident an qui aute dolor hic excepteur.
                    </p>
                    <footer class="article_footer">
                        <h3>Written by: John Doe | July 1st, 2015</h3>
                    </footer>
                </article>
                <article class="article_2">
                    <hgroup class="article_hgroup">
                        <h1>Article Title 2</h1>
                        <h2>Article Subtitle 2</h2>
                    </hgroup>
                    <p class="article_p">
                        Aut aute deserunt admodum, irure cernantur comprehenderit qui vidisse cillum 
                        elit doctrina quem de velit litteris in consectetur. Cernantur sint aliqua 
                        deserunt varias ubi veniam tempor distinguantur. Occaecat do occaecat ad elit 
                        vidisse de occaecat. Aut fugiat sempiternum, ut tamen veniam sint senserit de 
                        laboris ita commodo, a eram admodum ad nam de praesentibus, quo aut cillum amet 
                        minim, summis eiusmod e enim fugiat, culpa nescius familiaritatem. Si o 
                        transferrem, consequat e voluptate ea consequat legam tempor id qui dolor in 
                        labore, nostrud an minim consequat, senserit labore legam cupidatat lorem, quis 
                        iis ad aliqua tempor in de esse occaecat. Legam quibusdam ubi quem elit, ex 
                        consequat non doctrina e si noster proident an qui aute dolor hic excepteur.
                    </p>
                    <footer class="article_footer">
                        <h3>Written by: John Doe | July 1st, 2015</h3>
                    </footer>
                </article>
                <article class="article_3">
                    <hgroup class="article_hgroup">
                        <h1>Article Title 3</h1>
                        <h2>Article Subtitle 3</h2>
                    </hgroup>
                    <p class="article_p">
                        Aut aute deserunt admodum, irure cernantur comprehenderit qui vidisse cillum 
                        elit doctrina quem de velit litteris in consectetur. Cernantur sint aliqua 
                        deserunt varias ubi veniam tempor distinguantur. Occaecat do occaecat ad elit 
                        vidisse de occaecat. Aut fugiat sempiternum, ut tamen veniam sint senserit de 
                        laboris ita commodo, a eram admodum ad nam de praesentibus, quo aut cillum amet 
                        minim, summis eiusmod e enim fugiat, culpa nescius familiaritatem. Si o 
                        transferrem, consequat e voluptate ea consequat legam tempor id qui dolor in 
                        labore, nostrud an minim consequat, senserit labore legam cupidatat lorem, quis 
                        iis ad aliqua tempor in de esse occaecat. Legam quibusdam ubi quem elit, ex 
                        consequat non doctrina e si noster proident an qui aute dolor hic excepteur.
                    </p>
                    <footer class="article_footer">
                        <h3>Written by: John Doe | July 1st, 2015</h3>
                    </footer>
                </article>
            </section>
            <aside id="aside_left">
                <article class="article_aside_1">
                    <h1>Article Header</h1>
                    <p>
                        Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla 
                        ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat 
                        tamen minim in labore ea hic possumus cohaerescant.
                    </p>
                    <footer class="article_aside_footer">
                        <h3><a href="#">Full Post</a></h3>
                    </footer>
                </article>
                <article class="article_aside_2">
                    <h1>Article Header 2</h1>
                    <p>
                        Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla 
                        ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat 
                        tamen minim in labore ea hic possumus cohaerescant.
                    </p>
                    <footer class="article_aside_footer">
                        <h3><a href="#">Full Post</a></h3>
                    </footer>
                </article>
                <article class="article_aside_3">
                    <h1>Article Header 3</h1>
                    <p>
                        Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla 
                        ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat 
                        tamen minim in labore ea hic possumus cohaerescant.
                    </p>
                    <footer class="article_aside_footer">
                        <h3><a href="#">Full Post</a></h3>
                    </footer>
                </article>
            </aside>
            <aside id="aside_right">
                <article class="article_aside_1">
                    <h1>Article Header</h1>
                    <p>
                        Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla 
                        ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat 
                        tamen minim in labore ea hic possumus cohaerescant.
                    </p>
                    <footer class="article_aside_footer">
                        <h3><a href="#">Full Post</a></h3>
                    </footer>
                </article>
                <article class="article_aside_2">
                    <h1>Article Header 2</h1>
                    <p>
                        Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla 
                        ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat 
                        tamen minim in labore ea hic possumus cohaerescant.
                    </p>
                    <footer class="article_aside_footer">
                        <h3><a href="#">Full Post</a></h3>
                    </footer>
                </article>
                <article class="article_aside_3">
                    <h1>Article Header 3</h1>
                    <p>
                        Ut ne eram vidisse, noster se quibusdam non quae. Se admodum voluptatibus. Nulla 
                        ullamco tractavissent, possumus aliqua ex aliquip efflorescere te cupidatat 
                        tamen minim in labore ea hic possumus cohaerescant.
                    </p>
                    <footer class="article_aside_footer">
                        <h3><a href="#">Full Post</a></h3>
                    </footer>
                </article>
            </aside>
        </div>
        <!-- Main Body Ending -->
        <footer id="footer">
            &copy; All Rights Reserved. | <a href="#">Legal</a>
        </footer>
    </body>
</html>

Answer 1

浮动仅影响浮动元素后面的内容。因此，在您的情况下，由于旁边是浮动的，它们不会影响您的section。相反，您将不得不重新排序它们，因此浮动元素是第一个：

<div id="main_body">
    <aside id="aside_left"></aside>
    <aside id="aside_right"></aside>

    <!-- section after the floating elements -->
    <section id="section"></section>
</div>

顺便说一下。下次发布这样的问题时，你应该删除所有难以弄清楚你的结构的内容。你可以给它们固定的尺寸（也许是一些背景颜色，以便我们知道哪个盒子是什么），而不是将实际内容放在盒子里面。

对齐Aside＆amp;部分问题

1 个答案: