-1

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

我的博客文章标题

[博客发布日期在这里]

提供内容概述的单个段落。

[我的第一个字幕]

与第一个字幕关联的内容

[我的第二个字幕]

与第二个字幕关联的内容

[评论到这里]

除此之外，我还会有一些内容，可能是帖子右侧的引文或图形。我有两个挑战：1）我不确定如何使用 HTML 5 元素之间的关系，特别是文章和部分让我感到困惑。2）如何让我的旁白元素位于我其余内容的右侧。目前，我有以下内容：

<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>

我在正确的道路上吗？我看到关于文章与部分的各种东西？无论哪种方式，目前，我的aside内容都显示在我的文章内容下方。实际上，我希望它在它旁边。有谁知道 CSS 提供这种布局的适当方式？

谢谢

4

3 回答 3

0

我建议使用flexbox，这是布局页面组件的现代方式。在http://html5doctor.com/中，您应该搜索 header/aside/footer/section 和其他元素以了解更多关于它们的信息。这是一篇关于避免最常见的 html5 结构错误的好文章。

于 2013-06-18T13:13:39.213 回答
0

1) Html5 引入<Section>和<article>标签纯粹是为了语义。这意味着您将使用什么来为您的代码提供有意义的描述。当您在浏览器中看到它时，它们都将显示相同。

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.

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

如果您的数据无法在语义上定义，只需使用<div>

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

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

我还注意到您正在使用<header>和嵌套<h1>. 这不是必需的。要么使用<header>，要么<h1>因为它们都具有相同的含义。当您按照“Web 可访问性标准”创建页面时，这将更有意义。

于 2013-06-18T13:46:35.540 回答
-1

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

<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>

我会将整个博客文章包装在一篇文章中，并将其部分分成几个部分。

浮动部分aside：

.right-side, .left-side {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.right-side {
    width: 33%;        
    float: right;
}

.left-side {
    width: 67%;
    float: left;
}

和一个明确的修复floats：

.post:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
于 2013-06-18T13:02:03.560 回答