Is it possible to calculate the empty distance and add a margin automatically?

There is a task: to arrange the 4 identical blocks across the width if the container can be many such blocks, but the number should be only 4.

And there is such code https://jsfiddle.net/men6jj7r/1/where the first block more as it has no properties padding-left, because I need this block was pinned to the left edge (it SHOULD NOT BE).

Question: is it Possible using Javascript and float left blank to calculate the distance in the row and roughly speaking to do so, the width of the blocks in the row was the same, but 2, 3 and 4 unit should be a margin-left equal to: the empty space in the row / 3
July 8th 19 at 11:14
4 answers
July 8th 19 at 11:16
for example:
.container {
margin-left: -10px;
}
.block{
float: left;
width: 25%;
padding: 10px 0 0 10px;
height: 100px;
background: grey;
background-clip: content-box;
}

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

or this:
.container {
margin-left: -10px;
}
.block {
float: left;
width: calc(25% - 10px);
height: 100px;
background: grey;
margin-top: 10px;
margin-left: 10px;
}
July 8th 19 at 11:18
don't use float is the last century
use flexbox
Under ie9, you need to do ( - gennaro.Heidenreich commented on July 8th 19 at 11:21
sorry - cale67 commented on July 8th 19 at 11:24
July 8th 19 at 11:20
Themselves and answered any write js script - the algorithm you have written or use flexbox instead of float
July 8th 19 at 11:22
If I understand correctly, you need to add another wrapper
.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/

Find more questions by tags JavaScriptCSS