Question

当您阅读博客文章时，几乎所有博客上都有一个＆＃34;侧边栏＆＃34;在我要实施的布局中，我有一个巨大的文章标题（带照片和预告片），宽度为100％。在那之后，我已经获得了文章正文，并附有描述的侧边栏，之后，我已经（再次100％宽度）获得作者信息和评论。

在这种情况下，我无法摆脱＆＃34;侧边栏＆＃34;超出主要文章标签。最小的例子：

<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 ）
这可能可能不在一边（除了文章内部与文章高度相关，但在阅读时可以省略，并且此侧边栏是自动生成的，与文章无关）
这可能是一个部分，但当然不应该在文章标记内
没有机会，将这个元素从文章中删除，并且make是简单的部分，因为定位（绝对或flex）将难以管理，因为全屏页脚和标题。

任何帮助？

我已经使用jquery获得了一个解决方案，我可以将该元素从＆＃34; flow＆＃34;中删除，然后将其粘贴到其他地方，但也许只有使用HTML5的语义解决方案？

Answer 1

为什么不将文章正文放在For i As Integer = Me.BottomToolStrip.Items.Count - 1 to 0 Step -1 If Me.BottomToolStrip.Items(i).Name = "NewLabel" Then Me.BottomToolStrip.Items.RemoveAt(i) End If Next中，并将其宽度设为75％，<article>中的相关链接宽度为25％并将它们浮动？ <aside>标记用于有些相关的内容，但与内容本身分开。相关链接是def。适合<aside>。

codepen

W3C information on <aside>

HTML5语义：类似文章，内部文章标签

1 个答案: