html - グリッドに似た Div レイアウト

Question

だから私はこれとしてHTMLレイアウトを持っています:

<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" />
<div class="summary">Short summary</div>

次のように表示する方法：

<img src="image.jpg" /> <h1>Title</h1>
                        <div class="info">Extra info</div>
                        <div class="summary">Short summary</div>

フロートで試しましたが、次のように表示されました：

                        <h1>Title</h1>
<img src="image.jpg" /> <div class="info">Extra info</div>
                        <div class="summary">Short summary</div>

私は位置（相対および絶対）を試してみましたが、残念ながらIEではうまく機能せず、短い要約テキストが非常に短い場合、画像は他の要素の後ろに隠れます。画像の高さ（動的な高さ）がわからないので、height: xxx px; ここには収まりません。

どんな助けでも素晴らしいでしょう。

編集: この場合、すべての (右側の) 要素を div でラップすることはできません。

Answer 1

<img src="image.jpg" class="left-image" />
<div class="right-col">
    <h1>Title</h1>
    <div class="info">Extra info</div>
    <div class="summary">Short summary</div>
</div>

CSS

.left-image {
    float: left;
}
.right-col {
    margin-left: <width-of-image> px;
}

Answer 2

コードにdivを追加せずにそれを行うには、以下のCSSを追加します

img{float:left}
div{display:table-row}

デモ2

---

使用するposition:absolute

<h1>Title</h1>
  <div class="info">Extra info</div>
 <img src="image.jpg" width="40" />
   <div class="summary">Short summary</div>

CSS

img{float:left; top:0; position:absolute; left:0}
div, h1{display:block; margin-left:40px /*Add image width value as margin-left*/ }

デモ3

Answer 3

これはどうですか: http://jsfiddle.net/xpq2m/

CSS

body {
    padding-left: 100px;
}
img#s { 
    position: absolute;
    top: 0;
    left: 0;
}