Html 在文本左侧定位小图像?

Html 在文本左侧定位小图像?,html,css,css-float,Html,Css,Css Float,如果我这样做: <img src="" style="float:left"> SOME TEXT BLA BLA BLA BLA 它不起作用,因为当图像高度停止时,文本向下移动到图像。我的意思是: 它将这样做: 而我想得到的是: 我可以使用旧的好表(imgtext),但在2011年,这似乎不太合适:) 有什么简单的跨浏览器技巧可以做到这一点吗 编辑:我不知道图像的宽度 谢谢 使用两个div标记,将它们都向左浮动。其中一个宽度为30%,另一个宽度为70%。将图像放在第一个,

如果我这样做:

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

它不起作用,因为当图像高度停止时,文本向下移动到图像。我的意思是:

它将这样做:

而我想得到的是:

我可以使用旧的好表(
imgtext
),但在2011年,这似乎不太合适:)

有什么简单的跨浏览器技巧可以做到这一点吗

编辑:我不知道图像的宽度


谢谢

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

实现这一点有多种方法

1) 两个div。为两者指定一个宽度。向左浮动图像div,向右浮动文本div

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>


尽管仅在Chromium 8/Ubuntu10.10上进行了测试,但令人惊讶的是以下功能仍然有效:

img {
    width: 100px;
    height: 100px;
    background-color: #f90;
    float: left;
    margin: 0 10px 100% 0;
}
(忽略颜色,它们只是为了让我能看到东西放在哪里)


.

很好的解决方案。但是:如果我们不能知道图像的宽度呢?(比如在我的例子中:(@yes123:如果你不知道图像的宽度,那么它会变得更复杂…但我会看一看,看看我能做些什么。)它甚至可以在IE上工作,就是这样!它甚至比表格更简单。恭喜..页边距底部:100%是天才的闪光。我使用的是类似页边距底部:30px的东西(对我的文本来说已经足够了。但是没有想到100%xD)@yes123,这让我害怕,它是多么简单,让我惊讶它的工作原理。我以前从未遇到过解决方案(尽管我不相信我是下一个埃里克·迈耶,不管怎么说),并出于好奇而不是期望它工作。但感谢您的接受,从现在起我自己就在使用它:D@DavidThomas-它甚至在IE 5.5中也能工作,呵呵。这太不可思议了:)
img {
    width: 100px;
    height: 100px;
    background-color: #f90;
    float: left;
    margin: 0 10px 100% 0;
}