Выровнять текст справа от изображения && текст не обтекает изображение
Должно выглядеть так:
[img] text text
text text
Как это достигается?
Кажется прямым, но я борюсь.
Ответы
Ответ 1
Вы можете использовать display:inline-block;
img{
display:inline-block;
width:75px;
height:100px;
border:1px solid red;
vertical-align:top;
margin-right:10px;
}
div{
display:inline-block;
width:200px;
}
Пример: http://jsfiddle.net/jasongennaro/SK9ad/
Чтобы сделать inline-block;
работу с IE7, добавьте следующее к каждому правилу:
zoom: 1;
*display:inline;
Ответ 2
Поскольку вы знаете размеры изображения:
HTML:
<div style="position: relative;">
<img id="theimg" ... />
<div id="besidetheimg">
</div>
</div>
CSS
#theimg{
position: absolute;
top: 50%;
margin-top: -50px; // Half the width of the image
width: 100px;
height: 100px;
}
#besidetheimg{
margin-left: 100px; // width of image
}
Это немного странный способ сделать это. Я не уверен, есть ли лучший способ, но он работает: http://jsfiddle.net/dvLqC/