用CSS布局HTML5页面

我正在重建一个个人网站，以了解更多关于HTML5的信息。在此过程中，我将我的博客文章移动到使用一些新的HTML5元素，如header/article/section/aside。举个例子，by博客文章的格式如下：

我的博客文章标题 [博客发布日期在此]

提供内容概述的单个段落

[我的第一个副标题] 与第一个字幕关联的内容

[我的第二个副标题] 与第二个字幕相关联的内容

[评论请点击此处]

除此之外，我将有一些内容，也许是一个引用或一个图形出来的权利后。我有两个挑战：1）我不确定如何使用HTML5元素，尤其是文章和章节让我感到困惑。2） 如何使我的aside元素位于我其余内容的右侧。目前，我有以下几点：

<header>
  <h1>My Blog Post Title</h1>
  <p>Published <time datetime='18-06-2013'>June 6, 2013</time></p>
</header>

<div>
  <article>
    <p>A single paragraph that provides an overview of the content.</p>
    <section>
      <header>My first subtitle</header>
      The content associated witht he first subtitle.
    </section>

    <section>
      <header>My second subtitle</header>
      The content associated with the second subtitle.
    </section>
  </article>

  <aside>
    My right side content. This area should take up 33% of the entire width.
  </aside>
</div>

我的博客文章标题
2013年6月6日出版

提供内容概述的单个段落

我的第一个副标题
与第一个副标题相关的内容。
我的第二个副标题
与第二个字幕关联的内容。
我右边的内容。该区域应占整个宽度的33%。

我走对了吗？我看到了关于文章和章节的各种东西？无论哪种方式，当前，我的

旁白

内容显示在我的文章内容下方。事实上，我希望它在它旁边。有人知道CSS提供这种布局的合适方法吗

谢谢

我想还没有“完美”的答案。但我试了一下

<article class="post">
    <div class="left-side">
        <header>
            <h1>My Blog Post Title</h1>
            <p>Published <time datetime='18-06-2013'>June 6, 2013</time></p>
        </header>

        <section>
            A single paragraph that provides an overview of the content.
        </section>

        <section>
            <header>
                <h1>My first subtitle</h1>
            </header>
            <p>The content associated witht he first subtitle.</p>
        </section>

        <section>
            <header>
                <h1>My second subtitle</h1>
            </header>
            <p>The content associated with the second subtitle.</p>
        </section>
    </div>

    <div class="right-side">
        <aside>
            My right side content. This area should take up 33% of the entire width.
        </aside>
    </div>
</article>

以及

浮动

的clearfix：

.post:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

我建议使用这种现代的方式来布局页面组件。在中，您应该搜索页眉/旁白/页脚/节和其他元素，以了解它们的更多信息。这是一篇关于避免最常见的html5结构错误的好文章

1）Html5引入的

和

标签纯粹是为了语义。这意味着您将使用什么来对代码进行有意义的描述。当您在浏览器中看到它时，它们将显示相同

For e.g. Articles make more sense when you show forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

当您向用户显示一些信息时，请使用部分，例如常见问题解答、产品信息

如果您的数据不能进行语义定义，只需使用

下面是一个很好的例子来解释这种差异

http://html5doctor.com/the-article-element/

---

我还注意到您正在使用

和嵌套

。这是不必要的。使用

或

，因为它们的含义相同。当您按照创建页面时，这将更有意义‎网页可访问性标准。

标题是一个分组元素：它将所有标题内容分组在一起，而不是用于标记标题。您应该改用h1。如果你的标题元素只包含一个标题，那么你根本不需要它，只需要h1就可以了。我自己不是HTML5大师，但我觉得一篇文章比一个章节“小”。我认为官方文件在某个地方说，在论坛上，一个部分可以是页面的回复部分，而每个回复都是文章。@Lister先生，不，文章是一个能够独立存在的元素。如果你将它复制粘贴到另一个网站上，或者在RSS提要中找到它，它仍然有意义吗？如果是，那么它是一篇文章，否则它可能是一个章节，等等。我会用

文章

元素来包装整篇文章。包括

header

这里有一个教程，教你如何使用CSS在页面上设置元素的样式：尽管如此，旁边的内容仍然显示在主要内容的下面。我遗漏了什么吗？

旁白

内容不是你博客文章的一部分吗？

旁白

是否与你的文章或你问题中的整个页面相关还不太清楚。旁白内容应该是文章的一部分。从你写的HTML中我可以看出，这篇文章似乎与文章有关，因为它在同一篇文章中。是吗？是的，我认为

旁边的内容与帖子有关。然后，在我看来，将其放在
中是正确的。我会非常小心flexbox，
http://html5doctor.com/the-article-element/