Question

如果我这样做：

<img src="" style="float:left"> SOME TEXT BLA BLA BLA BLA

它不起作用，因为图像高度停止时文本会下移到图像。我的意思是：

它会这样做：

http://img8.imageshack.us/img8/9379/senzatitolo1yt.jpg

虽然我想得到的是：

http://img28.imageshack.us/img28/606/senzatitolo2rd.jpg

我可以使用旧的好桌子（<td>img</td><td>text</td>）但是在2011年并没有“似乎要走的路”：）

任何简单的跨浏览器技巧都可以做到这一点？

编辑：我无法知道图像宽度

谢谢！

Answer 1

使用两个div标签，将它们都向左浮动。给其中一个宽度为30％，另一个宽度为70％。将图像放在第一个图像中，将文本放在第二个图像中。

Answer 2

鉴于简单的html：

<img src="path/to/img.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui odio, luctus ut viverra vitae, dignissim a mauris. Vestibulum vel massa at sapien tincidunt venenatis id sed purus. Ut quam libero, mollis a ullamcorper sed, gravida id ligula. Sed nec augue enim. Phasellus accumsan aliquet erat interdum ullamcorper. Cras tellus libero, tincidunt non placerat interdum, venenatis id arcu. Nulla facilisi. Maecenas malesuada vestibulum venenatis. Nam vel tellus arcu. Sed non dui urna. Proin fermentum aliquet lectus non fermentum. Donec aliquet purus et tortor lobortis gravida. Duis vehicula ligula nec enim consequat ut tempor diam molestie. Aenean egestas eros sem. Phasellus ullamcorper pretium nunc molestie luctus. Mauris semper ultricies nulla, at tempus purus eleifend vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ac est nunc.</p>

以下CSS有效：

p {
    margin-left: 100px; /* width of image plus some padding for white-space */
}

img {
    float: left;
    width: 90px;
    height: 90px;
}

JS Fiddle demo

令人惊讶的是，以下是有效的，尽管只在Chromium 8 / Ubuntu 10.10上进行了测试：

img {
    width: 100px;
    height: 100px;
    background-color: #f90;
    float: left;
    margin: 0 10px 100% 0;
}

JS Fiddle demo（忽略颜色，他们就是这样，我可以看到事物的位置）。

Second (post-edit) JS Fiddle demo, featuring an img with non-specified dimensions

Answer 3

有多种方法可以实现这一点。

1）两个div。分配宽度。将image-div浮动到左侧，将text-div浮动到右侧。

2）使用边距！

试一试并给我反馈。

在文本左侧定位小图像？

3 个答案: