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

Question

[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 Возможно я с самого начала сделала что-то не так, что вполне логично. Возможно, сразу, как многие говорят, нужно верстать на флексах. В любом случае не кидайтесь камнями, я только начинаю и мне интересно прости каждый метод, от флоатов до гридов :)
Заранее всем спасибо!

Answer 1

[Павел Радьков]

До появления флексов эта проблема решалась костылями и хаками:

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

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

Но если всё же хочется получить подробные комментарии, сделайте демки на codepen и добавьте ссылки в вопрос.

Comments

[AlinaGronina]

С флексами таковой проблемы не наблюдается? Я просто до них еще не добралась, но знаю что они мощные :)

"2. Колонки на инлайн-блоках, а кнопки в них спозиционированы абсолютно от нижней границы колонок."
Я так делала, но тогда кнопки все равно "пляшут", даже еще больше, т.к колонки разной высоты...

А вот третий вариант интересный, спасибо)

Answer 2

[sergey]

(в курсах по верстке говорят: "атата, НИЗЗЯ делать фиксированную высоту блокам")

сомнительное утверждение, разные бывают случаи. В Вашем случае контент разный в блоках, без задания высоты блоков здесь не обойтись.

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

и с помощью медиа запросов контролируйте этот min-height

Comments

[Павел Радьков]

Атата не зря говорят. Рекомендуется делать min-height вместо фиксированной высоты через height — вот что имелось ввиду.

[sergey]

Павел Радьков: я это и имел ввиду

[game802]

Павел Радьков: кстати, а не могли бы Вы мне объяснить, почему нельзя делать фиксированную высоту блока? Спасибо!

[Павел Радьков]

HackOwnB:
Когда внутри блока текст и ширина блока уменьшается, количество строк этого текста увеличивается. Если у блока зафиксирована высота, текст вылезет за пределы блока.

Когда внутри блока картинка и ширина блока уменьшается, картинка подстраивается под ширину контейнера и её высота тоже уменьшается. Если у блока зафиксирована высота, под картинкой появится пустое место.

И наоборот, при увеличении ширины блока, под текстом появится пустота, а картинка перестанет помещаться в блоке, если у блока фиксированная высота.

Фиксировать высоту можно, когда вы уверены, что ваш контент не может менять свою высоту при изменении ширины. Иначе, лучше использовать min-height, max-height, чтобы у контента была хоть какая-то свобода.

Answer 3

[Юрий Есин]

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

Comments

[game802]

.blocks > * > *,
.blocks .text > * {
  display: block;
}

Блин, Вы серьезно?)

[Юрий Есин]

HackOwnB: Работает? Работает. Какие проблемы?)

[game802]

Юрий Есин: за каскад нужно руки отрывать по самые корни. Ни в коем случае нельзя давать такие примеры начинающим верстальщикам. Конечно, я еще тот критик, блин)

[Юрий Есин]

HackOwnB: а я вот бы руки с удовольствием поотрывал за тонны классов и идентификаторов в верстке, когда работаю с js. Так и живём)

[game802]

Юрий Есин: которые работают с js

<header class="header js-fixed-header">
      <nav class="header-navigation"></nav>
  </header>

Для этого и существуют дополнительные префиксы, которые дают понять человеку то, что тут используется js

[game802]

Юрий Есин:
с тоннами классов, которые имеют грамотный подход, очень даже приятно работать:

html

<ul class="menu">
  <li class="menu__item">item 1</li>
  <li class="menu__item">item 2</li>
</ul>

sass

.menu {
  &__item {
    background-color: #f00;
  }
}

и тем более такие классы, которые описывают действительность. Так что, не все так плохо)

[Юрий Есин]

HackOwnB: к сожалению, те проекты, которые часто приходится за кем-то доводить до ума на фрилансе, имеют далеко не грамотный подход)

[AlinaGronina]

Спасибо, но до JS мне еще далеко :)

[Сергей delphinpro]

Юрий Есин: Не работает =) Хоть бы так сделали
https://codepen.io/delphinpro/pen/BdaewM?editors=0010

[Юрий Есин]

Сергей: работает всё. Если б не работало, не выкладывал бы пэн.

У элементов div по умолчанию значение высоты равно auto, нет смысла его дополнительно задавать, особенно с учетом того что оператором ниже оно будет переназначено. А обработчик на ресайз окна... улыбнуло) Пэн накидан за 5 минут для демонстрации одного из способов решений, кому надо еще и под ресайз окна подогнать, тот прикрутит строчку кода, я думаю, без особых проблем) На отзывчивость для разных разрешений оно в любом случае не влияет, лишь на "резину" при изменениях размеров окна.

[Сергей delphinpro]

Юрий Есин: суть не в auto, суть в том что при уменьшении окна верстка ломается.
5 мин - это хорошо, но лишнюю минуту, даже полминуты потратить не трудно было бы.
Ну и могу еще придраться - в верхней строке лишнее пустое пространство из-за высокого блока в нижней.
Так что решение очень сырое.

Если бы я отвечал на этот вопрос, то порекомендовал бы использовать flex-раскладку с простым фоллбэком на инлайн-блоках. В подавляющем большинстве браузеров было бы все как надо, а лишь в небольшой кучке отстающих кнопочки были бы невыровненными. и никому от этого плохо бы не было. Намекаю на то, что прикручивать скрипт в данном случае - это не только излишне, но порождает дополнительные проблемы, что вы неплохо проиллюстрировали своим примером.
Как-то так =)