这支笔的边栏在哪里？

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>

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

我的困惑：

在这个示例中，侧边栏在哪里？

- Zameer Ansari

Answer 1

<aside>是侧边栏部分。

在你的CSS中：

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

您可以通过此链接了解有关盒模型（box-sizing）的内容：http://www.paulirish.com/2012/box-sizing-border-box-ftw/。

- Hitmands

---

我被雇佣了吗？接受我的回答吧 :P - Hitmands

是的，您可以在一分钟内加入团队 ;) （15分钟接受时间限制） - m4n0

我参加了，但我想使用es6而不是css :P - Hitmands

Answer 2

问题在于您告诉程序占用100％的页面宽度。如果将两个宽度减少到70％和20-25％，则侧边栏将向右浮动，与主内容体相邻。

- Evan Sanderson

---

我也是这么想的，面试测试是为了检查候选人是否理解了box-sizing。 - m4n0

@ManojKumar 在这个评论中，你是指的这个吗？Irish的链接需要一些TL;DR版本 ;) - Zameer Ansari