Как проще всего сверстать 3 блока и внизу 4?

Question

[Justin Bieber]

Адаптивно, без бутстрапа

Comments

[Sayonji]

Что значит адаптивно?

[Justin Bieber]

Sayonji: ну при уменьшении разрешения, чтоб в было не 3 и 4, а например уже 1-2-2-2

Answer 1

[Sayonji]

Вы можете управлять переносом строки, оборачивая группы блоков во вспомогательные контейнеры типа inline-block. Например, вот так. Тут элементы span/ только группируют элементы p/ для разбиения на строки.

Comments

[Максим]

я прошу прощения , а что у вас за пример ? https://s.mail.ru/CybK/YRuXnCBAi?e

[Justin Bieber]

Sayonji спасибо, то что бабуля прописала )

[Sayonji]

. Shadow: Все в порядке, во-первых, это уже решается указанием размеров блоков, а во-вторых, на супер большом экране так и должно быть. Но если не нравится, то после первой тройки можно поставить явный br/, и будет всегда минимум 2 ряда.

[Максим]

Sayonji: а если три элемента в один div , и четыре элемента в другой див , и отдельные стили для поведения элементов внутри каждого див, так не лучше ??? да и на большом экране и на маленьком будет одинаково

[Sayonji]

. Shadow: Можно и в разные дивы, это ничем не отличается от одного дива с br/ посередине.

Answer 2

[iBird Rose]

display: inline-block; блоки родителю которых задан text-align: center;