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>

我尝试使用 float 但它显示为:

                        <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

要在不向代码中添加额外的 div 的情况下完成它，请添加以下 CSS

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

DEMO 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*/ }

DEMO 3