RGameShow
@RGameShow
В поисках ответов на глупые вопросы

Как ГРАМОТНО адаптировать контент внутри 2х колонок по 50% (col-6 col-6) не используя GRID?

Всем привет!
Много верстаю и часто встречается вот такой шаблонный блок, картинка слева и текст с заголовком справа:

62c6f23db3272898520204.png

На экране до 1200px часто бывает так, что заголовок хочется сделать по центру, а нижнюю часть сделать align-items-center:

62c6f2a6541dd718794260.png

Какие варианты есть, для подобной реализации?

Я делаю следующим образом, костыльным, и мне не очень нравится данное решение..
h2 {
  transform: translateX(-25%);
}
.column-1 {
  transform: translateY(-7%);
  align-self: end;
}



Или так:
.container {
	position: relative;
	padding-top: 95px;
}
h2 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: inline-table;
}

  • Вопрос задан
  • 222 просмотра
Пригласить эксперта
Ответы на вопрос 2
Fragster
@Fragster
помогло? отметь решением!
Гридами можно хорошо сделать: https://play.tailwindcss.com/ZUMURCMEVs
Ответ написан
@wadowad
Как вариант: сначала обернуть контент, затем блок с контентом и заголовком обернуть в ещё один враппер. С первой ситуацией всё просто: у рисунка проставляем ширину и float: right, у враппера display: flow-root. Для второй ситуации: включаем флекс с переносами для основного контейнера; у враппера делаем display: contents, чтобы он вообще не учитывался; у заголовка меняем позицию order: -1 и ширину в 100%. Из минусов метода: как минимум одна лишняя обёртка.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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