— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сделал за последнее время:
| Заказать мне работу |
| 17.03 | 2 способа расположить картинку сбоку от текста |
Иногда необходимо разместить сопровождающую иллюстрацию сбоку от текста, так чтобы текст не обтекал ее. Например, вот для таких заметок:
Я пользуюсь с равным успехом вот такими способами:
Первый:
<div>
<img src="#" alt="" title="" />
<p>Something text</p>
</div>
<img src="#" alt="" title="" />
<p>Something text</p>
</div>
.wrapper{
padding:0 0 0 150px; /*ширина картинки + отсуп от нее*/
overflow:hidden; /*чтобы контейнер не схлоповался*/
zoom:1; /*то же самое, что и выше, но для IE. В некоторых случаях можно обойтись и без zoom*/
}
.wrapper img{
float:left;
margin-left: -150px; /*сдвигаем на значение padding у .wrapper*/
}
padding:0 0 0 150px; /*ширина картинки + отсуп от нее*/
overflow:hidden; /*чтобы контейнер не схлоповался*/
zoom:1; /*то же самое, что и выше, но для IE. В некоторых случаях можно обойтись и без zoom*/
}
.wrapper img{
float:left;
margin-left: -150px; /*сдвигаем на значение padding у .wrapper*/
}
Второй:
<div class="wrapper">
<img src="#" alt="" title="" />
<p>Something text</p>
</div>
<img src="#" alt="" title="" />
<p>Something text</p>
</div>
.wrapper{
overflow:hidden; /*чтобы контейнер не схлоповался*/
zoom:1; /*то же самое, что и выше, но для IE. В некоторых случаях можно обойтись и без zoom*/
}
.wrapper img{
float:left;
margin-right: 10px; /*отступ текста от картинки*/
}
.wrapper p{
display:table; /*можно заменить на oveflow:hidden;*/
zoom:1;
}
overflow:hidden; /*чтобы контейнер не схлоповался*/
zoom:1; /*то же самое, что и выше, но для IE. В некоторых случаях можно обойтись и без zoom*/
}
.wrapper img{
float:left;
margin-right: 10px; /*отступ текста от картинки*/
}
.wrapper p{
display:table; /*можно заменить на oveflow:hidden;*/
zoom:1;
}
Мне больше нравится первый способ. Кода меньше. Но второй способ позволяет использовать картинки любой ширины.
Комментарии