html - divs布局类似于网格

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;
}