Make a block combining pixels and percentages

Trying to do as shown in the picture. The number M is the same in all cases and is intended as a percentage. I am a beginner, so I believe that I’m missing the well-known formula that counts this number in two accounts. If there are other options for solving this problem, I will be glad to read it.

Approximate code turned out below. That's just instead of 4% in

.box-M { width: 4%; }

should be the number M. Thanks in advance!

 .box { width: 100%; height: 44px; } .box div{ float: left; height: 44px; } .box div:nth-child(even) { background-color: red; width: 44px; } .box div:nth-child(odd) { background-color: black; } .box div:first-child, .box div:last-child { width: 7.5%; } .box-M { width: 4%; } </style> <div class="box"> <div></div> <div></div> <div class="box-M"></div> <div></div> <div class="box-M"></div> <div></div> <div class="box-M"></div> <div></div> <div class="box-M"></div> <div></div> <div></div> </div>

    2 answers 2

    It is clear that it is easier (and probably more correct) to make flex-ohm, but the vehicle requested calculations - here they are:

     *{ box-sizing:border-box; } body{ margin:0; } .block{ overflow:hidden; padding:0 calc(7% + 22px); position:relative; } .m{ float:left; height:50px; background-color:#acd; margin:0 22px; width:calc(25% - 44px); } /*для наглядности*/ .block:before, .block:after{ content:'7%'; display:block; position:absolute; top:0; width:7%; height:50px; line-height:50px; text-align:center; } .block:before{ left:0; border-right:1px dotted; } .block:after{ right:0; border-left:1px dotted; } 
     <div class="block"> <div class="m"></div> <div class="m"></div> <div class="m"></div> <div class="m"></div> </div>

    • As a percentage, calculate the width of the block M will not work. the padding between them is given in absolute values. - zhurof
    • The solution that is most suitable for cross-browser compatibility will be implemented on the site - Artyom
     <div class="box"> <div class="m"></div> <div class="m"></div> <div class="m"></div> <div class="m"></div> </div> 


     .box { display: flex; justify-content: space-around; height: 25px; width: 960px; padding: 0 7%; border: 1px solid #000; box-sizing: border-box; } .m { display: flex; flex-basis: 20%; background: orange; }