Как инлайн элементы сделать одинаковыми по высоте родителя?

Question

[Senseich]

Есть блок в котором инлайн блоки. В которых предполагается разный по кол-ву слов текст, соответственно высота блоков меняется. Как сделать, чтобы не зависимо от текста блоки были одинаковые по высоте.

Вот для примера: https://jsfiddle.net/nt1v6e0h/

Comments

[Ярослав Иванов]

Min-height

[Senseich]

Ярослав Иванов, что Min-height ? ) я не поленился, специально пример создал, можете на нём показать, что вы подразумеваете, если для блоков min-height: 100%; , то я уже пробовал

[Ярослав Иванов]

Senseich, в пикселях

[Senseich]

Ярослав Иванов, и как это поможет, если текста будет много они всё равно будут разные

[Ярослав Иванов]

Senseich, ну тогда на js'e

[Senseich]

Ярослав Иванов, видимо только так

Answer 1

[Антон Спирин]

Вот вариант решения с переходом с inline на flex. https://jsfiddle.net/yggnswa5/

Comments

[Senseich]

Антон Спирин Спасибо, я знаю, что на флексах такое можно сделать, но я хотел бы это сделать на инлайнах ) возможно я отстал от времени, хотелось бы знать возможно ли так сделать или прибегать к js всё таки

[Антон Спирин]

Senseich, зачем в 2017 году верстать блоки на inline? flex даже на IE 11 себя прекрасно чувствует.
Могу еще предложить такой трюк https://jsfiddle.net/yrk7z4v0/. Но я бы использовал flex

[Senseich]

Антон Спирин, Хитро, но думаю это просто мой загон, надо тоже к флексам привыкать. Ещё такой вопросик, немного не по теме, почему в моём примере при width:33%; блоки перескакивают на другую строку, а при width:30%; норм. Это глюк редактора или чего? )

[Антон Спирин]

Чтобы не перестраивались надо:
1. для самих блоков надо добавитьfloat: left;
2. глобально для всех элементов box-sizing: border-box;
3. более менее точное значение трети в css 33.33333%;
4. для конейнера использовать clearfix:

main::after {
    display: block;
    content: "";
    clear: both;
  }

5. для имитации маргинов border: 2px transparent; и backgorund-clip: padding-box;

Не бойтесь flex, сейчас вся промышленная разработка на нем.
А IE ниже 11 версии больше не используются.

[Senseich]

Антон Спирин, Ок, т.е для инлайн - блоков 33.3% не работает, только для float: left; , вроде всегда работало, или я ошибаюсь? )

[Антон Спирин]

Senseich, браузер переносы строки между инлайн элементами на пробелы заменяет. Из-за пробелов элементы и перестраиваются.
Чтобы работало без float: left; надо либо переносы строки между элементами убрать

<div class="into">...</div><div class="into">...</div><div class="into">...</div>

либо хак с комментариями использовать:

<div class="into">Натуральные полудрагоценные вставки</div><!--
--><div class="into">Биогенные вставки</div><!--
--><div class="into">Биогенные вставки</div>

либо задать font-size: 0; для контейнера main и нормальный размер для детей.

[Senseich]

Антон Спирин, хм, интересно, не знал )

Answer 2

[Kovalsky]

Можно имитировать таблицу - контейнеру сделать display: table, а дочерним элементам - table-cell. И кстати у вас элементы не инлайновые, а inline-block.

Comments

[Senseich]

скажите, а в таком случае как отступы между элементами задавать? тут margin уже не срабатывает )

[Kovalsky]

Senseich, border-spacing на контейнер, принцип работы аналогичен margin. Но если отступы нужны только между элементами, то речь уже опять о флексбокс.

[Senseich]

Никита Полевой, да спасибо уже нашел , просто сначала к ячейке это применил не посмотрел )

Answer 3

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/nt1v6e0h/3/

Comments

[Senseich]

Ярослав Иванов, конечно, но думаю пора привыкать к флексам )

Answer 4

[lodas]

Используйте лучше для этого flex, а для браузеров которые не поддерживают IE9 и т.д. вариант Ярослава.