Как реализовать верстку с обтеканием?

Question

[Roshan37]

Подскажите, как это реализовать в рамках бутстрапа 3? Или может есть другой изящный выход без кучи проблем с адаптивностью?
Я наваял вот такое безобразие для примера, но на страницу такое вываливать стыдно.

Answer 1

[Ivan Bogachev]

1. Расположить элементы так, как на картинке, проще всего заданием width, float и clear для них. И это логично, флоаты как раз предназначены для всевозможных обтеканий.
2. Чтобы отступы между картинкой и текстом не скакали, была ровная сеточка, а строки в разных блоках совпадали по вертикали, имеет смысл жестко привязать ее (картинки) высоту к EM/REM. Вообще удобно все к этим единицам привязывать, но это уже другая история.
3. Исходя из пункта 2, нужно добавить media-выражения для картинки на разные размеры экрана. Да, это лишняя работа. Да, это не чик-чик и в продакшен, но если важны мелочи в дизайне - делаем.
4. На маленьких экранах все это будет плохо восприниматься, так что выстраиваем элементы в столбик. Ширина в 100% всему. По уму контент важнее, чем aside, так что меняем их порядок с помощью свойств flex, flex-direction и order.

Получится что-то такое:

Comments

[Roshan37]

Спасибо большое! Про clear не знал. Видимо, нужно начать перед сном читать все свойства просто по алфавиту.

Answer 2

[Iuriy]

Посмотрите с использованием Grid.

Answer 3

[problin]

> Я наваял вот такое безобразие...

Так будет чуть правильнее:

img {
float: right;
width: 450px;
height: 150px;
margin-left:1em;
}

.second {
clear: right;
float: right;
margin-top: 10px;
width: 175px;
}