padding nimmt extraspaces auf, ich möchte, dass meine divs sich wie bootstrap divs verhalten

Question

Ich habe vier divs gemacht, jede von 25% und schwebte sie nach links. wenn ich jetzt Polsterung zu jedem dieser divs geben, kann die letzte div nicht innerhalb einer Zeile und bewegt sich nach unten, enthalten sein, da jede dieser divs zusätzliche Leerzeichen als die vorgegebene 25% einnehmen, wie unten:

<div class="container"> 
    <div class="abc"> 
    </div> 
    <div class="abc"> 
    </div> 
    <div class="abc"> 
    </div> 
    <div class="abc"> 
    </div> 
</div> 

.container { 
    width: 100%; 
    height: auto; 
} 
.abc { 
    width: 25%; 
    float: left; 
    padding: 15px; 
} 

aber wenn ich Bootstrap Divs betrachten, lassen Sie uns auf col-lg-4 div sagen. Die col-lg-4 div ist 33,33% und hat auch 15px Padding links und rechts und passt immer noch auf die gleiche Zeile. Ich möchte, dass meine Divs sich genauso verhalten. Was fehlt mir hier?

Answer 1

Verwenden Sie box-sizing: border-box; auf der .abc Divs. Dies führt dazu, dass die Berechnung der Breite (und der Höhe) den Rahmen und die Füllung enthält.