Рівновіддалені елементи в CSS

Добрий день!
Сьогодні хотів би поговорити про реалізацію рівновіддалених елементів за допомогою css.
Часто на блогах бачу горизонтальну смужку, в якій розміщуються рівновіддаленим блоки.
Зазвичай – анонси на попереднім статті або маленька реклама.
Для початку давайте розмістимо рівновіддаленим 4 картинки.
Для початку створимо блок, в який помістимо 4 картинки, я розміщу однакові картинки.
!>
В даному випадку ми створили контейнер, і пропишемо css-стилі для цього блоку
#main{ text-align:justify}
#main span{ display:inline-block; width:100%; }
З зображеннями вийшло)
Давайте розберемося в коді.
“Навіщо, тут span”- запитаєте Ви.
Моя відповідь – “Виходить span “лягає” під картинками і завдяки цьому картинки не розвалюються”.
Тепер давайте розберемося, як можна зробити 4 рівновіддалених блоку.
Як завжди, для початку створимо контейнер, в який вкладемо 4 блоку.
Блок 1
Блок 2
Блок 3
Блок 4
!>
Думаю, тут нічого складного немає.
Тепер пропишемо css властивості
#container {
text-align: justify;
text-justify:newspaper;
width:100%
}
#include{
display:-moz-inline-box;
display:inline-block;
vertical-align:top;
text-align:left;
width:100px;
height:100px;
background:black;
}
#text{display:-moz-inline-box; display:inline-block; width:100%; }
Все добре відображається, можна змінити кількість блоків.
У даній статті, я вам показав як зробити рівновіддалені елементи, використовуючи css стилі.
Сподіваюся, стаття була корисна.
З повагою,cava!