0

私は、本質的に次の構造を持つHTML（これは、回避できればやりたくない恐ろしいPHPスクリプトによって生成されたもの）のスタイルを設定しようとしています。

<div class="outer">
  <div class="imageContainer"><img src="image42.png" /></div>
  <h1>The Title String</h1>
  <div class="description">Lorem ipsum dolor sit amet, ... </div>
  <div class="details">These are the details...</div>
</div>

をdiv.imageContainer左にフロートさせ、をdiv.details右にフロートさせて、説明テキストをそれらの間に流し込みます（説明テキストがたくさんある場合は、左の画像の下に）。

次のCSSはと右を取得しますが、説明の右下と右に、（実際には、完全に外れている）が与えられているようにdiv.imageContainer見えます。div.descriptiondiv.details"clear:left"div.outer

.imageContainer { float: left; }
.description    { width: 50%;  }
.details        { width: 50%;
                  float: right; }

SOで見つけた他のいくつかの投稿のアドバイスに従って、次のように追加してみました。

.outer          { overflow: hidden; }

これは、 -div.outerを含むようにを長くしますが、を相対的に同じ位置に残します。div.detailsdiv.detailsdiv.description

div.description私の例のHTMLでは、タグとdiv.detailsタグの順序を交換すると、希望どおりに表示されることがわかります。これは例としては素晴らしいことですが、私が本当にスタイリングしたいHTMLを生成しているそのひどく恐ろしいPHPコードの内臓を掘り下げることを避けるのに役立ちません。：-/

CSSだけでこれを達成する方法はありますか？

（私はJavascript / jQueryでDOMをいじることができることを理解していますが、それは私には厄介なようです。）

4

1 に答える 1

0

ご要望に応じて、JSBin.com でサンプルを作成しました。

サンプルでは、​​要素にfloat:left;スタイルを適用し、div.description要素のフロートをクリアしましたdiv.outer。

ここで更新されたソースを確認してください

于 2012-12-11T05:56:24.807 に答える