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

Question

[Петр Сергеев]

https://codepen.io/Icat/pen/OdXWbb

Картинки имею разный размер.
Задача выровнять все то, что идет после картинок, т.е. что бы текст 'hello' и 'world' были на одной линии.
средствами flex или bootstrap

Answer 1

[Виталий Першин]

Если я вас правильно понял, то как вариант так:

Comments

[Петр Сергеев]

спасибо

[Петр Сергеев]

еще вопрос немного не по теме, а нужен ли вообще бутстрап? Интересно лично ваше мнение

[Виталий Першин]

223606322, Самому интересно) С флексами и гридами у меня лично никаких проблем не возникает в верстке. Я бутстрапом пользовался только по необходимости. Например при верстке шаблона под CMS Opencart, он там впилен намертво и раз уж он там есть, то каким-то возможностями приходиться пользоваться. В целом если хорошо его освоить то конечно скорость увеличиться, но тут наверно зависит и от ваших предпочтений и от особенностей проекта...

[Петр Сергеев]

Виталий, блин, появилась новая проблема, если контента больше, то снова все едет

https://jsfiddle.net/aLc4pbhe/

[Никита Мелихов]

223606322, Bootstrap - просто один из инструментов для ускорения разработки, чтобы не писать каждый раз заново. Нужен или не нужен - это уже зависит от требований к вёрстке и знаний/опыта верстальщика.

[Виталий Першин]

223606322, Вам бы побольше узнать о флексах... То что вы пытаетесь сделать сейчас, это совсем другое, чем то что требовалось в вопросе изначально. Этот способ работает как раз благодаря тому что, снизу у нас одинаковые элементы, за счет того что все блоки имеют высоту самого большого в одном ряду, мы можем прижать наши одинаковые по размера элементы к низу и увидеть их на одно линии, а вы сейчас и сверху и снизу пытаетесь вставить динамический контент. Такое можно осуществить разве что если позиционировать нижний контент абсолютно, ну или через js тогда уже. Брать высоту самой большой картинки и применять и рассчитывать на сколько нужно отодвинуть ваши заголовки

[Виталий Першин]

223606322,

[Петр Сергеев]

Никита Мелихов, исходя из моего вопроса и ответов на него, все равно придется заладить и менять бутстраповские row и col...

[Виталий Першин]

223606322, не обязательно, бутстрап 4 построен на флексах и там действуют те же правила

Answer 2

[Евгений]

img {
  height: 150px;
}

Comments

[Петр Сергеев]

а без этого возможно, типа средствами flex или bootstrap?

Answer 3

[Сергей Горячев]

Comments

[Петр Сергеев]

спасибо

[Петр Сергеев]

еще вопрос немного не по теме, а нужен ли вообще бутстрап? Интересно лично ваше мнение

[Сергей Горячев]

223606322, тут есть моя личная позиция по нему.
Что изучать верстальщику и в каком порядке?
Часто ли используют Bootstrap в работе?

[Петр Сергеев]

Сергей Горячев, а можете привести какой-то конкретный пример где бутстрап выигрывает, в частности вы говорили про админ панель, что там легче бутстрапом?

[Сергей Горячев]

223606322, всё. Зачем верстать админку, с нуля, если можно добиться всего на готовом коде.

[Петр Сергеев]

А теперь проблема в том, что если контента больше, то снова все едет
https://codepen.io/Icat/pen/QYExQy

Answer 4

[Сергей Бут]

Оберните текст в блок с классом flex

<div class="flex">
    <h2>Hello</h2>
    <p>World</p>
    </div>

.flex {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

Comments

[Сергей Бут]

или же задайте каждому тегу текста display: inline-flex; , и justify-self каждому

[Петр Сергеев]

не выходит
https://codepen.io/Icat/pen/zeBZZG