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中不能很好地工作，如果简短的摘要文本很短，那么图像隐藏在其他元素后面。我不知道图像高度（动态高度），所以身高：xxx px;不适合这里。

任何帮助都会很棒。

修改： 在这种情况下，我不能包装所有（右侧）元素。

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}

<强> 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

Answer 3

这个怎么样：http://jsfiddle.net/xpq2m/

CSS

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

Divs布局类似于网格

3 个答案: