Question

我正在使用一些非常简单的html，希望可以产生一个侧边栏，但是侧边栏中的文本只是在同一页面的下一个段落中显示。在Chrome和Safari中均为True。

<!DOCTYPE html>
 <html>
 <body>
     <section>
         <p>
         This is the main content.  I'm not content to have main content without a sidebar.
         </p>

     <aside>
         <p>
         As an aside, I want this to be at the side.
         </p>
     </aside>
     </section>
 </body>
</html>

我需要添加样式元素吗？根据文档，我不会这么认为。我也尝试了更长的“章节”文本，但是没有用。我也尝试过<sidebar>标签。

Answer 1

这些html5标记

<section>, <main>, <nav>

等对浏览器没有影响，就像编写

<div>

。它们存在的唯一目的是使您的源代码更具可读性。顺便说一句，我认为这实际上并不存在。

Answer 2

来自HTML 5 specification：

aside元素表示页面的一部分，该部分由与aside元素周围的内容切向相关的内容组成，可以认为与该内容是分开的。这些部分通常在印刷版式中表示为侧边栏。

这不是像其他HTML标记那样在视觉上起作用的东西。

考虑使用Flexbox

#section {
  display: flex;
  flex-direction: row;
}

<!DOCTYPE html>
<html>
<body>
  <section id="section">
    <p>
      This is the main content. I'm not content to have main content without a sidebar.
    </p>

    <aside id="aside">
      <p>
        As an aside, I want this to be at the side.
      </p>
    </aside>
  </section>
</body>
</html>

您也可以尝试使用float。

Answer 3

您将需要为此使用CSS。语义HTML标签-部分，文章，旁边等...对页面的呈现没有太大影响。其中一些通常只添加默认的display: block样式，仅此而已。

为什么这个HTML'aside'不在侧面出现？

3 个答案: