HTML - 如何使用分散的容器保持语义正确的<article>展示位置？</article>

Question

我正在构建一个应该在语义上正确的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完成吗？：

Answer 1

将article分成两部分：标题和内容（只是div），然后浮动此内容，即可达到预期的效果。

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

您无法在article上添加clearfix（或aside将保留在下方），因此您必须将其放在父级（此处为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>