Можно ли высчитать пустое расстояние и добавить margin автоматически?

Question

[myskypesla]

Есть задача: расположить 4 одинаковых блока по ширине если в общем контейнере может быть множество таких блоков, но в ряд должно становиться всего 4.

И есть такой код https://jsfiddle.net/men6jj7r/1/, в котором первый блок больше так как у него нет свойства padding-left, т.к. мне нужно чтобы этот блок был прижат к левому краю (ТАК БЫТЬ НЕ ДОЛЖНО).

Вопрос: Можно ли как-то с помощью Javascript и float left рассчитать пустое расстояние в ряду и грубо говоря сделать так чтобы, ширина блоков в ряду стала одинаковой, но у 2, 3 и 4 блока должен быть margin-left равный: пустое пространство в ряду / 3

Answer 1

[ArturArturov]

например так:
.container {
margin-left: -10px;
}
.block{
float: left;
width: 25%;
padding: 10px 0 0 10px;
height: 100px;
background: grey;
background-clip: content-box;
}

или так:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.block{
width: calc(25% - 10px);
height: 100px;
background: grey;
background-clip: content-box;
}

или так:
.container {
margin-left: -10px;
}
.block {
float: left;
width: calc(25% - 10px);
height: 100px;
background: grey;
margin-top: 10px;
margin-left: 10px;
}

Answer 2

[Андрей]

Сами же и ответили - либо пишите js скрипт - алгоритм вы сами написали, либо используйте flexbox вместо float

Answer 3

[monochromer]

Если я правильно понял, нужно добавить еще одну обертку

.container {
    padding-left: 8px;
    padding-right: 8px;
	
}

.wrap {
	margin-left: -8px;
	margin-right: -8px;
}

.block {
    box-sizing: border-box;
    width: 25%;
    float: left;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

https://jsfiddle.net/9kd2emL5/