Процентный margin в float с inline-block?

Question

[ennam]

Ребят, подскажите как починить данную проблему: codepen.io/anon/pen/wKvboB

Answer 1

[Кирилл]

Для .row задай width: 100%; или сколько тебе нужно там.
P.S.
ennam: Объясняю. Как рассчитывается margin в процентах? Правильно, проценты от ширины родителя. В твоем случае чему равна ширина .row? Правильно, ширине вложенных в него .col, без учета свойства margin-right: 10%, потому что брузер еще не знает из какого значения считать 10%.
Затем, когда уже известна ширина .col высчитывается процентный margin. А по скольку .col уже занял нужную ему ширину, то все .row не влезают в одну строку и переносятся на следующую.
Это все несложно посчитать, если для inline-block убрать лишние пробелы, которые им присущи. codepen.io/anon/pen/epYaEG
Как видишь в данном примере ширина .row 150 пикселей, ширина .cal по 50px каждый. И margin-right уже после рассчета процентов равен 15 пикселям, что как раз и является десятью процентами от ширины .row

Comments

[ennam]

В задаче требуется, чтобы он автоматом растягивался.

Answer 2

[Andrew]

Не очень понимаю в чем проблема, но:

codepen.io/anon/pen/gaOJmV

Comments

[ennam]

100% ставить нельзя. Хочется добиться того же результата, как если бы сделать margin-right: 10px

Answer 3

[Сергей Зеленский]

Процентный margin в float с inline-block

когда прочитал думал все на один блок аж перекрестился