@Roshan37

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

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

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

Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@problin
> Я наваял вот такое безобразие...

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

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

.second {
clear: right;
float: right;
margin-top: 10px;
width: 175px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы