Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков.
Для добавления блоков, используйте тэги
<div class="box"> <div class="block-1">Содержимое</div> — ширина блока 1-24
Чтобы основной блок box немного смещал контент после себя, нужно добавить к нему класс row.
Продумать перенос блоков для мобильной версии — адаптивность.
Написать шорткод для удобства использования
Размеры блоков
12-ти ядерная архитектура
На данном сайте не используется.
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
2/12
2/12
2/12
2/12
2/12
2/12
3/12
3/12
3/12
3/12
4/12
4/12
4/12
5/12
5/12
2/12
6/12
6/12
7/12
4/12
1/12
8/12
4/12
9/12
3/12
10/12
2/12
11/12
1/12
12/12
24-х ядерная архитектура
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
2/24
3/24
3/24
3/24
3/24
3/24
3/24
3/24
3/24
4/24
4/24
4/24
4/24
4/24
4/24
5/24
5/24
5/24
5/24
4/24
6/24
6/24
6/24
6/24
7/24
7/24
7/24
3/24
8/24
8/24
8/24
9/24
9/24
6/24
10/24
10/24
4/24
11/24
11/24
2/24
12/24
12/24
13/24
11/24
14/24
10/24
15/24
9/24
16/24
8/24
17/24
7/24
18/24
6/24
19/24
5/24
20/24
4/24
21/24
6/3
22/24
2/24
23/24
1/24
24/24
Верстка Bootstrap
Все таки я пришел к тому что верстка Bootstrap это отличное решение дающее равное расстояние между блоками.
.box {
min-width: 100%;
display: flex;
position: relative;
align-items: center;
margin-left: -15px;
margin-right: -15px;
}
.box-inside {margin-left: -15px; margin-right: -15px; display: flex;}
.box > *, .box-inside > * {padding-right: 15px; padding-left: 15px; order: 10;}
.block-1 {width: 8.33%;}
.block-2 {width: 16.66%;}
.block-3 {width: 25%;}
.block-4 {width: 33.33%;}
.block-5 {width: 41.66%;}
.block-6 {width: 50%;}
.block-7 {width: 58.33%;}
.block-8 {width: 66.66%;}
.block-9 {width: 75%;}
.block-10 {width: 83.33%;}
.block-11 {width: 91.66%;}
.block-12 {width: 100%;}
@media screen and (max-device-width: 480px) {
.box, .box-inside { flex-wrap: wrap; }
.box-inside > * {width: 100%;}
}
Отступы получаются фиксированными. А по краям выравнивание происходит за счет обратных значений margin.
Тэги: верстка
