"Выскакивание" в CSS

[kotenok gav]

Пусть есть несколько контейнеров с примерно таким CSS. Видно, что контейнеры с длинными надписями "выскакивают" вверх. Как сделать, чтобы они не выскакивали?

[ipgmvq]

Вообще в этом случае можно просто выровнять по верхнему краю, добавив в стиль
vertical-align: top;
Но я бы не игрался с div, для которого характерно быть block, переводя его в inline-block (т.к. он не строковый элемент) — если я хотел бы разместить несколько div так, то первое в голову мне бы пришло добавить в стиль
float: left;
оставив дефолтный
display: block;

[kotenok gav]

ipgmvq в сообщении #1483676 писал(а):

vertical-align: top;

Спасибо!

[Mental]

kotenok gav в сообщении #1483606 писал(а):

Как сделать, чтобы они не выскакивали?

Внезапно узнать о существовании Flexbox.

[kotenok gav]

Ну, я о нем знаю, но никогда не пробовал. Попробую.

[kotenok gav]

У flexbox возникает новая проблема - пожираются первые элементы.

[ipgmvq]

Они же не помещаются во внешний div, у которого ширина 300px

[Mental]

kotenok gav в сообщении #1483819 писал(а):

У flexbox возникает новая проблема - пожираются первые элементы.

Видимо вам достался голодный.

Используется синтаксис CSS

width: 100%;

[kotenok gav]

Mental в сообщении #1483867 писал(а):

width: 100%;

Нет, мне надо, чтобы у контейнера была фиксированная ширина.

[Mental]

kotenok gav в сообщении #1483886 писал(а):

Mental в сообщении #1483867 писал(а):

width: 100%;

Нет, мне надо, чтобы у контейнера была фиксированная ширина.

Так рассчитайте сколько надо пикселов, чтобы всё уместилось, либо шрифт уменьшите. С этим и школьник должен справиться.

[kotenok gav]

Мне надо, чтобы первый элемент размещался в самом начале контейнера, а не незнамо где, как сейчас.

[Mental]

kotenok gav в сообщении #1483890 писал(а):

Мне надо, чтобы первый элемент размещался в самом начале контейнера, а не незнамо где, как сейчас.

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

[kotenok gav]

Мне надо, чтобы все было как в

kotenok gav в сообщении #1483819 писал(а):

У flexbox возникает
новая проблема - пожираются первые элементы

, но элементы не пожирались. В понятие "все" также входит конкретная ширина контейнера.

[kotenok gav]

Почему вообще происходит такое?

[ipgmvq]

kotenok gav в сообщении #1484091 писал(а):

Почему вообще происходит такое?

C flex или c inline-block?