css - HTML - 如何在分散的容器中保持语义正确的 位置？

Question

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

我图片上的左侧布局不是问题，因为这样可以:

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

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

但是如果 main <h1> 怎么办？文章的 应该放在文章和侧边栏的上方？我不能只将文章和边栏嵌套在 <article> 中因为侧边栏不是文章中的旁注。而且我不能在 <article> 中嵌套标题 + 段落因为侧边栏不会像第一种情况那样与段落对齐，而是与标题对齐。

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

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

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

Answer 1

通过将 article 分成两部分:标题和内容(只是一个 div)，然后 float 此内容，您可以达到预期的效果。

aside 也可能是 float 的(然后必须设置宽度)或设置为 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>