Как сверстать адаптивные 5 колонок с отступами между ними?

Question

[Леонид Нимченко]

Здравствуйте.
Что-то туплю. Подскажите, пожалуйста, как адаптивно сверстать пять равных по ширине колонок с равными отступами между ними но без отступов по краям?

Answer 1

[axeax]

https://jsfiddle.net/86tgyfwn/

Answer 2

[Negwereth]

F
L
E
X

Comments

[EverOne]

Тут только четыре.
По теме: caniuse.com/#feat=flexbox Все ОК, как ни странно.

Answer 3

[iBird Rose]

обернуть в div, которому нужно задать минусовой margin отступов.

.row {margin-left: -15px; margin-right: -15px;}
.col {width: 20%; padding-left: 15px; padding-right: 15px;}

Comments

[Negwereth]

Ребят, уже 2017 за половину перевалил, какие маржины, вы чего?

[iBird Rose]

Negwereth: человек хочет просто 5 колонок. без каких либо нюансов. по моему методу он получит эти 5 колонок и они будут работать даже на телефонах siemens 2006-ых годов в которых есть браузер.
p.s. есть вещи, для которых flex необходим и без него пришлось бы городить костыли - тут я бы слова не сказал. но в данной ситуации flex не нужен.

[Negwereth]

iBird Rose: он именно для этого и был создан

[EverOne]

iBird Rose: А меня отрицательный margin, прибитый padding'om другого блока, всю жизнь напрягал. Прям ну не знаю что с собой делать.

Answer 4

[chimir]

проще всего это сделать на флексах https://jsfiddle.net/chimir/nx5vnLm5/

если же делать на флоатах, то воспользоваться псевдоклассами :first-child и/или :last-child, чтоб убрать отступ у крайних элементов.