Позиционировать маленькое изображение слева от текста?

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 (не обращайте внимания на цвета, они были просто такими, как я мог видеть, гдевещи сидели).

Вторая (после редактирования) демонстрационная версия JS Fiddle с изображением img с неопределенными размерами .

Answer 3

Есть несколько способов осознать, что.

1) два деления.назначьте оба ширину.переместите изображение div влево, текст div в правую сторону.

2) используйте поля!

сделайте это и дайте мне обратную связь.