Как уместить блоки по центру?

Question

[Енот Енотов]

Подскажите плиз, как уместить 4 блока по центру контейнера?
не могу разобраться с процентными отступами...
1)Ширина контейнера = 1220
2)Ширина блока = 286
3)Ширина всех блоков будет занимать = 1144
4)Свободное пространство = 76 (задействуем под маргины)

нужно сделать так что бы промежутки были везде одинаковыми.

https://jsfiddle.net/8buzxh0b/

Comments

[Lynn «Кофеман»]

И что же не получилось?

Answer 1

[Андрей Федоров]

.content {
   display: flex;
   justify-content: space-between;
 }

Comments

[Енот Енотов]

А без флекса можно как-нибудь? по старинке

[Андрей Федоров]

Енот Енотов: А зачем? Лучше научитесь пользоваться flex. )
Если по старинке, то используйте таблицы.

[Енот Енотов]

Вроде flex сейчас не все любят, смотрел вакансии , все трубуют верстку Ie9+ , а флекс поддерживается только с 11 если не ошибаюсь. так что придется все равно учится верстать старыми способами с маргинами) или нет?

[Dmitriy Uvarov]

Енот Енотов: у нас работе ниже 10й версии ie не поддерживается

[Сергей delphinpro]

Енот Енотов: Зачем обходится без флекс?? Вакансий требующих IE9 немного, можно и мимо них пройти.

Давно верстаю флексами, проблем нет.

[Сергей delphinpro]

В конце концов, сделайте на флексах красиво, а для IE9 запилите небольшой фоллбэк. Путь там не будет по центру, или расстояния не будут выдержаны, но контент останется доступным. Это главное в современном вебе (если речь идет не о продающей странице)

Answer 2

[Алексей Зуев]

Как альтернативу флекса justify-content: space-between; можно использовать text-align: justify

.content {
  text-align: justify;
}

.content:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

jsfiddle.net/8buzxh0b

Comments

[Енот Енотов]

Спасибо

Answer 3

[dron100]

Задай отступы, а на последний используй псевдо класс и убери этот отступ.
Хотя хлексы лучше использовать.

Answer 4

[Александр Булгаков]

еще вариант, без флекса если надо.

Answer 5

[Енот Енотов]

А если делать с помощью margin-right и margin-left, то каков будет алгоритм? допустим если маргины будет фиксированные.

Comments

[Dmitriy Uvarov]

Енот Енотов Тогда так

[Енот Енотов]

Дмитрий Уваров: свободное пространство 74px (Забыл про рамку которая занимает часть блока, ибо border-box) , в общем 74 / 3 = 24,66666666666667
а у вас 24.6874px;
или эти сотые не имеют особой разницы?

[Енот Енотов]

Енот Енотов: спасибо