Как расположить блоки по ширине?

Question

[Ингвар Фон Бьёрк]

Собственно имеется 4 блока в одном родительском. Требуется сделать так, чтобы эти 4 div расположились по всей ширине родителя в ряд с одинаковой шириной и расстояниям между друг другом. Вариант с % не очень хорошо работает. Есть ли способы по лучше?

UPD: блоков больше 4-х, требуется чтобы именно 4 блока влезало в одну строку.

Comments

[holfza]

Почему "Вариант с % не очень хорошо работает"?

Answer 1

[Ankhena]

Вариант с % не очень хорошо работает.

Почему это?

Задаете каждому 23% (ну или сколько хотите, чтобы на отступы осталось).
Если расстояния между блоками фиксированные, не в %, то calc

width: calc(25% - Фикс.Расстояние.Поделенное.на.3 );

Ну и родителю:

display:flex;
justify-content: space-between;

Либо аналогично с inline-block + отступы у всех кроме одного крайнего.

Comments

[Ингвар Фон Бьёрк]

Забыл сразу добавить: блоков больше 4-х, требуется чтобы именно 4 блока влезало в одну строку.

[Ankhena]

Ингвар Фон Бьёрк: ну какая разница?
Допишете flex-wrap, остальные перенесутся на следующую строку.

[Ankhena]

Ингвар Фон Бьёрк: с инлайнами аналогично, будете убирать правый отступ у каждого 4-го.

Answer 2

[Александр Степанов]

Я думаю тебе нужно копать в сторону calc, а именно:
width: calc(100% / 4 - 15px);
где 4 - количество блоков
15px - расстояние между ними,
причем задаёшь это свойство у всех блоков, у последнего пишешь просто:
width: calc(100% / 4);
Успехов!

Comments

[Ankhena]

Если у последнего написать как Вы сказали, то он окажется шире, чем первые 3.
Да и непонятно, зачем 100/4 с помощью calc.

Answer 3

[Петр Пономарев]

Используйте bootstrap3
Каждому блоку добавляете класс col-lg-3 и готово. Там еще много полезных фишек.