css - 如何用CSS反转标题和正文的 float 顺序？

Question

不改变 HTML 结构:

<div id="container">
  <header>
    <h1>This is the Heading Which May be Long and Span Lines</h1>
  </header>
  <section>
    <div class="thumb">
        <img></img>
    </div>
    <div class="content">
      <p>Content</p>
      <p>continues</p>
      <p>and wraps around the thumb</p>
    </div>
  </section>
</div>​

我需要对其进行样式设置，以便 img.thumb 向左浮动，而 header h1 悬卡在其右侧，并且可以换行。 h1 应该左对齐:

+------------+   Heading Text which May Be Long and
|            |   Thus would Span Lines
|   thumb    |
|            |   Content
+------------+   continues
and wraps around the thumb.

布局(即标题和内容的宽度)应流畅地适应容器的宽度。 (拇指是固定宽度的。)

有什么方法可以在不改变元素顺序的情况下使用 CSS3 实现这一点？我可以通过固定右列的宽度来做到这一点，但是有没有办法指定“使用 float 右侧的剩余空间作为宽度”？ (没有javascript，less等)

在这里 fiddle :http://jsfiddle.net/agRx3/1/

Answer 1

由于拇指的宽度是固定的，所以可以使用position: absolute来固定图片的位置。然后，标题和内容可以具有 margin-left，它略大于拇指宽度

fiddle :http://jsfiddle.net/SJvav/

编辑:要让内容环绕边距，让图像和文本 float:left 并给图像一个负边距，这样它就在 h1 旁边> http://jsfiddle.net/SJvav/2/