Задать вопрос
IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности
html

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

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

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

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

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

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

P.s. элементы должны быть по центру.
  • Вопрос задан
  • 212 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
tendkuh
@tendkuh
PHP sucks, it's very important to remember, folks
Чтобы друг под другом, то надо переделать на display: block и задать ширину блокам
Ответ написан
6 комментариев
6 комментариев
Пригласить эксперта
Ответы на вопрос 1
@WhiteBearDev
Бэтмэн
1. Если хотите использовать inline-block, то обернуть каждый из блоков в дополнительную обёртку с шириной 100%. Например, 
<div class="message__wrapper"><div class="s1">Текстовый текст</div></div>


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Создание промо картинок мобильного приложения
24 апр. 2024, в 16:42
10000 руб./за проект
Визуальные в фронтенд WebApp телеграмм бота
24 апр. 2024, в 16:35
5000 руб./за проект
Установить вебхук на сайт
24 апр. 2024, в 16:19
4000 руб./за проект
Ещё заказы