2

我正在构建一个应该在语义上正确的 HTML 文档。因此，<aside>即与网站相关的（即侧边栏）应该放在外面<article>，而<aside>与直接相关的文章（如果有的话）应该放在里面<article>。

这不是我图像上的左侧布局的问题，因为这将起作用：

<article>article</article>
<aside>sideabr</aside>

.article, .aside { float: left; }
.article { width: 70%; }
.aside { width: 30%; }

但是如果<h1>文章的主要部分应该放在文章和侧边栏的上方呢？我不能只嵌套文章和侧边栏，<article>因为侧边栏不是文章中的旁注。而且我不能嵌套标题+段落，<article>因为侧边栏不会与段落对齐，而是与第一种情况下的标题对齐。

在此处输入图像描述

知道此类文档的 HTML 结构应该是什么样子吗？

大多数作为参考的网站都使用左侧版本：http ://twentytwelvedemo.wordpress.com/about-2/所以我找不到任何可靠的东西可以学习。

这在技术上应该是这样的，但这完全可以在 HTML 中完成吗？：

在此处输入图像描述

4

1 回答 1

2

通过article一分为二：标题和内容（只是一个div），然后浮动这个内容，你可以达到预期的效果。

aside也可能是浮动的（您必须设置宽度）或设置为overflow: hidden.

您无法在article（或aside将留在下方）添加 clearfix，因此您必须将其放在父级（此处section）。如果必须有背景，则背景相同。

演示：http ://codepen.io/anon/pen/BAjLr

CSS

section {
  width: 500px;
  background-color: tomato;
}
/* clearfix */
section:after {
  content: '';
  display: table;
  clear: left;
}

/* article */
h1 {
  margin-bottom: 0;
}
article .content {
  float: left;
  width: 300px;
  background-color: lightgreen;
}

/* aside of section */
aside {
  overflow: hidden;    
  color: white;
  background-color: darkslateblue;
}

HTML

<section>
  <article>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id laudantium beatae quae recusandae!</h1>
    <div class="content">
      <p>article Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt repudiandae nam commodi iusto ullam neque aliquam ut numquam. Cumque ut tempora consectetur quam velit ad incidunt necessitatibus saepe eos exercitationem.</p>
    </div>
  </article>

  <aside>
    <h2>sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quae</p>
  </aside>
</section>
于 2013-06-15T11:49:02.957 回答