@AlinaGronina

Как правильно расположить блоки с кнопками?

Всем привет! 3 месяц постепенно изучаю HTML|CSS, решила попробовать сверстать лэндинг... Сверстала только с фиксированными размерами, а позже решила переделать часть на % и auto.

Сделала 3 блока, каждому задала width:25% и height: auto; зафлоатила и под каждым из них по кнопке поставила через inline-block, но т.к текста в каждом из блоков разное количество , а высота блоков не фиксирована (в курсах по верстке говорят: "атата, НИЗЗЯ делать фиксированную высоту блокам") получается так, что блоки отталкивают кнопки и они стоят не на одной линии.
1. Стоит min-width и браузер открыт полностью - все нормально joxi.ru/a2XbDb8Hy4ypdr
2. Но стоит сузить окно браузера...колонки становиться разной высоты и отталкивают кнопки. (если взглянуть на третью кнопку, она видимо делает отступ уже не от второй кнопки, а он второго блок т.к они на одной высоте) :
joxi.ru/8AndWdPHqyqRpm

(каждой кнопке задан одинаковый маргин, кнопки на inline-block, расположение ровно под блоками достигается за счет такой же ширины как у блоков над кнопками и такими же отступами от краев и между собой)

Второй вариант: верстаю не только кнопки как inline-block, но и сами блоки (выравнивая по верху) - joxi.ru/YmEJYJQTZMZje2
Становиться немного лучше т.к при разной высоте блоков, кнопки стоят в один ряд, что уже смотрится не так страшно. (хотя я не поняла почему кнопки в один ряд, думала тоже будет лесенкой...) Но есть мелкий недочет: все же кнопки почему-то не ровно под блокам.

Вопросы:
Что, в общем и целом, с этим делать и как сделать так, чтобы кнопки не "прыгали", а были на одной линии?
Можно ли как-то "связать" колонки, чтобы они даже при масштабировании равнялись на какую-то одну колонку(ту, в которой больше контента) и были одинаковой высоты?

P.S Возможно я с самого начала сделала что-то не так, что вполне логично. Возможно, сразу, как многие говорят, нужно верстать на флексах. В любом случае не кидайтесь камнями, я только начинаю и мне интересно прости каждый метод, от флоатов до гридов :)
Заранее всем спасибо!
  • Вопрос задан
  • 231 просмотр
Решения вопроса 1
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
До появления флексов эта проблема решалась костылями и хаками:

1. Колонки на флоатах выравнивались с помощью js. По событию onResize высота колонок пересчитывалась.
2. Колонки на инлайн-блоках, а кнопки в них спозиционированы абсолютно от нижней границы колонок.
3. Имитация таблицы через display: table и table-cell + медиа-запросы, чтобы разобрать таблицу на малых экранах.

Я бы рекомендовал вам не заморачиваться и просто погуглить «блоки одинаковой высоты» и почитать старые статьи для ознакомления, а тренироваться верстать уже на флексах и гридах.

Но если всё же хочется получить подробные комментарии, сделайте демки на codepen и добавьте ссылки в вопрос.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
zorro76
@zorro76
(в курсах по верстке говорят: "атата, НИЗЗЯ делать фиксированную высоту блокам")
сомнительное утверждение, разные бывают случаи. В Вашем случае контент разный в блоках, без задания высоты блоков здесь не обойтись.

.block{
    height: auto;
    min-height: 250px;
}

и с помощью медиа запросов контролируйте этот min-height
Ответ написан
Exomode
@Exomode
Архитектор ПО
Набросал я вам тут вариантик на досуге...
https://codepen.io/Exomode/pen/OjJdma - с применением JavaScript, самый надёжный, но более сложный и требует JS, что само по себе иногда может быть не так производительно как на чистом CSS.
флоатов и таблиц здесь нет, а это значит что верстка будет отзывчивой для разрешений экранов различных устройств и может содержать в себе неограниченное количество блоков.
Ответ написан
Ваш ответ на вопрос

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

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