这支钢笔的侧边栏在哪里？

Question

  

如何解决侧栏问题：   http://codepen.io/chriscoyier/pen/ClGcF

body {
  padding: 30px;
}
header {
  background: lightblue;
}
section {
  background: lightgreen;
  width: 75%;
  float: left;
}
article {
  background: white;
  margin: 0 0 1rem 0;
}
aside {
  background: pink;
  width: 25%;
  float: right;
}
header,
article,
section,
.module {
  padding: 1rem;
}

<main>
  <header>
    <h1>Site</h1>
  </header>
  <section>
    <article>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
    </article>
    <article>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
    </article>
  </section>
  <aside>
    <div class="module">
      <h3>Module</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio rem ab delectus fugit repellendus perspiciatis dolor consequuntur tenetur voluptatem a vitae odit aspernatur? Voluptas quisquam corporis nostrum aspernatur aliquid harum saepe ab pariatur
        veniam iste ipsam alias nemo voluptatibus doloribus.</p>
    </div>
  </aside>
</main>

目标是让侧边栏移回顶部。

我的困惑：

笔内侧边栏在哪里？

Answer 1

<aside>是侧边栏部分。

在你的css中：

*,*:after,*:before { box-sizing: border-box; }

您可以在此链接后阅读有关框尺寸的信息：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

问题是你告诉程序占用100％的页面宽度。如果将两个宽度减小到70％和20-25％，侧边栏将向右浮动，靠近主内容体。