Проблема inline-block?

Question

[Ivan Ivanovich]

Здравствуйте. Есть код - https://jsfiddle.net/h3usqvdk/

Дело в том, что элементы выстраиваются в строку, а мне нужно, чтобы каждый из них находился друг под другом.

Задал inline-block, чтобы background занимал только область текста.

1. Помогите пожалуйста поместить элементы друг под другом.

2. Почему не отображается картинка? (s3)

P.s. элементы должны быть по центру.

Answer 1

[tendkuh]

Чтобы друг под другом, то надо переделать на display: block и задать ширину блокам

Comments

[Ivan Ivanovich]

Уже решил проблему. Добавил br.

[tendkuh]

Ivan Ivanovich, нельзя br для блоков использовать, он используется для форматирования текста и развечто в сочетании с спанами и не дивами

[tendkuh]

Ivan Ivanovich, вы нарушаете семантику, поисковики грязный код могут отсеять из выдачи

[tendkuh]

https://jsfiddle.net/v8t1e2ba/

[Ivan Ivanovich]

tendkuh, Благодарю.

[tendkuh]

Ivan Ivanovich, та нема за шо, звертайтесь ще.

Answer 2

[WhiteBearDev]

1. Если хотите использовать inline-block, то обернуть каждый из блоков в дополнительную обёртку с шириной 100%. Например,

<div class="message__wrapper"><div class="s1">Текстовый текст</div></div>

2. Для отображения background, укажите ширину и высоту блока, для которого background применяете