Как выровнять 9 блоков в одном 100%?

Question

[Степан]

1. Нужно что бы они шли по 3 в ряд.
2. При увеличении или уменьшении экрана не разъезжались.
3. Что бы правые и левые прижимались к бокам.
4. Что бы от центральных и сверху и снизу был равный отступ



Нарисовал как смог.
Браузеры только новые. Уже второй день мучаюсь

Comments

[Степан]

Еще должна быть адаптивная высота?

Answer 1

[Алексей Николаев]

jsfiddle.net/rrftmyoe попробуйте так. Если нужна фикс. ширина, измените значение width: 100% у класса .w100 на любое нужное вам.

Comments

[Степан]

Не могу понять почему этот трюк работает с padding и не работает с margin? Подсобите объяснением?

[Алексей Николаев]

@xoma2 все дело в box-sizing (почитать можно тут: htmlbook.ru/css/box-sizing). Обычно ширина элемента не включает в себя padding, с использованием же box-sizing мы можем заставить браузер высчитывать ширину элемента вместе с его внутренними отступами. Margin же не считается потому, что это отступы от элемента (которые не связаны с его шириной).

Answer 2

[Степан]

А как этим блокам добавить адаптивной высоты?

Comments

[Алексей Николаев]

jsfiddle.net/rrftmyoe/4 обновил. Особое внимание на комментарии.

[Степан]

У меня почему то не сработало? Пришлось задавать самому внутреннему div padding в %

[Алексей Николаев]

@xoma2 а покажите ваш код, пожалуйста, лучше всего закиньте его в jsfiddle.net

Answer 3

[Railchik]

а bootstrap чем не подходит?