Почему parent растягивается?

Question

[desuvin]

Прошу помочь объяснить почему в данном случае parent растягивается на размер всего контейнера и как это можно починить :)

codepen.io/anon/pen/EjVojb

Answer 1

[Андрей Мохов]

потому как child`ы не влезают в него, потому он достигает максимально возможного размера, уменьшите количество до двух, в этом случае - они поместятся и ширина parent будет уже

Comments

[desuvin]

А как тогда реализовать с неизвестным числом блоков? Чтобы потом повесить
на .container text-align: center
а на parent: text-align: left

Так возможно?

Answer 2

[Михаил Горячкин]

Потому что браузер пытается уместить все ваши блоки в одну строку, так как у них display: inline-block и для этого пытается растягивает блок на максимальную ширину в данном случаи на 1000px. Если вы оставите только два блока "child", то блок подстроится для них.

Comments

[desuvin]

Это как пример. .parent просто должен вместить столько блоков сколько сможет и отцентроваться по середине. Это возможно?

[Михаил Горячкин]

Он пытается выстроит блоки в одну линию, а выравнивание блоков внутри него уже зависит от того, что вы указали у родителя. Если у .parent будет text-align: center, а у .child так и останется inline-block, то будет их равнять по центру.

[Михаил Горячкин]

Вы объясните, что конкретно то вам необходимо сделать?

[desuvin]

Михаил Горячкин: Вопрос был такой: можно ли как-то сделать, чтобы синяя область вот тут codepen.io/anon/pen/EjVojb занимала именно по ширине как 2 красных блока. То есть браузер бы определил, что третий не влез, но не стал бы растягивать синюю область. Есть ли какой-либо способ для такого? :)

Прошу прощения, что снизу продубриловал тоже самое. Просто иначе комментарий бы у вас не отобразился в новостях

Answer 3

[Андрей Б.]

Почему так происходит вам уже написали. Хочу заметить что в случае с inline-block нужно убирать отступы между блоками. Сделать это можно например указав для родителя font-size: 0; и не забыть переопределить его для дочерних элементов (если в них есть текст). Подробнее.
Только в вашем случае еще нужно поделить блоки на равную ширину. 1000 / 3 = 33.3333% (или 333.3333px)

Comments

[desuvin]

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

А как тогда реализовать с неизвестным числом блоков? Чтобы потом повесить
на .container text-align: center
а на parent: text-align: left

Так возможно?

[Андрей Б.]

desuvin, нет не возможно. У вас ширина блоков 350px * 3 = 1050px, размер контейнера 1000px. Ничего не ёкает?)) Либо уменьшайте ширину блоков, либо увеличивайте ширину контейнера.

[desuvin]

Андрей Б.: Это как пример. .parent просто должен вместить столько блоков сколько сможет и отцентроваться по середине. Это возможно?

[Андрей Б.]

Блоки должны располагаться в одну линию? И иметь фикс размер? С фикс размером такое не сделать.

[Андрей Б.]

Если не влезающий блок должен падать вниз, то решение проблемы я вам написал, внутренние блоки строке (в вашем случае 3 блока в строке) должны иметь размер в сумме не превышающий размер контейнера.

[desuvin]

Андрей Б.: Это все понятно, но вопрос был такой: можно ли как-то сделать, чтобы синяя область вот тут codepen.io/anon/pen/EjVojb занимала именно по ширине как 2 красных блока. То есть браузер бы определил, что третий не влез, но не стал бы растягивать синюю область. Есть ли какой-либо способ для такого? :)

[Андрей Б.]

desuvin Нет

[desuvin]

:(