1

当您阅读博客文章时，几乎所有博客上都有一个包含类似文章、最新评论等的“侧边栏”。在我将要实现的布局中，我有一个巨大的文章标题（带照片和拖车），宽度为 100%。之后，我有了文章正文，带有描述的侧边栏，之后，我有了（再次 100% 宽度）作者信息和评论。

在这种情况下，我无法使用主文章标签中的“侧边栏”来逃避。最小的例子：

<article>

    <!-- ARTICLE HEADER -->
    <header style="width: 100vw; height: 100vh">
        <h1>title</h1>
        <p>trailer</p>
        <time>...</time>
    </header>

    <!-- ARTICLE BODY -->
    <h2>...</h2><p>...</p><ul>...</ul> x few

    <!-- SIDEBAR - PROBLEM -->
    <div id="sidebar">
        <h2>Similar articles</h2><ul>...</ul>
        <h2>Latest comments</h2><ul>...</ul>
    </div>

    <!-- ARTICLE FOOTER -->
    <footer id="author" style="width: 100vw; height: 100vh">
        <h1>Details</h1>
        <section>
            <h1>Author</h1>
            <address>...</address>
        </section>
        <section>
            <h1>Comments</h1>
            <ul>...</ul>
        </section>
    </footer>

</article>

问题在于 div#sidebar 以及它应该包含的元素类型。

  • 这当然不是文章的一部分（所以它不能是 div）
  • 这可能不在旁边（除了文章内部与文章高度相关，但可以在阅读时省略，并且此侧边栏是自动生成的，与文章完全无关）
  • 这可能是一个部分，但当然不应该在文章标签内
  • 没有机会将这个元素从文章中制作出来，并且制作简单的部分，因为定位（绝对或弹性）将难以管理，因为全屏页脚和页眉。

有什么帮助吗？

我有一个使用 jquery 的解决方案，我可以将元素从“流”中删除，然后将其粘贴到其他地方，但也许有一个仅使用 HTML5 的语义解决方案？

4

1 回答 1

2

为什么不把文章正文放进去<article>，给它一个 75% 的宽度和一个 25% 宽度的相关链接，<aside>然后让它们都浮动？<aside>标签用于有些相关但与内容本身分开的内容。相关链接是def。一个适合<aside>。

密码笔

W3C 信息<aside>

于 2016-05-19T15:33:38.077 回答