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なし、lessなど）

ここでフィドル：http：//jsfiddle.net/agRx3/1/

4

1 に答える 1

1

親指の幅は固定されているためposition: absolute、画像の位置を固定するために使用できます。ヘッダーとコンテンツはmargin-left、親指の幅よりわずかに大きいものを持つことができます

フィドル： http： //jsfiddle.net/SJvav/

編集：コンテンツを余白に巻き付けるには、画像とテキストfloat:leftを考慮し、画像に負の余白を付けて、h1 http：//jsfiddle.net/SJvav/2/のすぐ横に配置します。

于 2012-07-08T06:28:43.247 に答える