0

在不改变 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/

4

1 回答 1

1

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

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

编辑：要让内容围绕边距，让图像和文本为图像和文本并给图像一个负边距，因此它就在http://jsfiddle.net/SJvav/2/float:left旁边h1

于 2012-07-08T06:28:43.247 回答