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实现这个目的的方法是什么，而不改变元素的顺序？我可以通过固定右列的宽度来做到这一点，但有没有办法指定“使用浮动右侧的剩余空间作为宽度”？（没有javascript，更少，等等。）

在这里小提琴：http://jsfiddle.net/agRx3/1/

Answer 1

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

小提琴：http://jsfiddle.net/SJvav/

编辑：要让内容环绕边距，请设置图片和文字float:left并为图片添加负边距，使其位于h1 http://jsfiddle.net/SJvav/2/旁边

如何逆转航向的浮动顺序身体与CSS？

1 个答案: