Warum divs mit gleichen prozentualen Breiten sind nicht gleichmäßig render

Question

Ich mache benutzerdefinierte Video-Player-Controller basierend auf HTML 5 Video-Tag. Von Anfang an habe ich die Breite des Volumens col in px hinzugefügt, aber wenn ich den Vollbildmodus betrete, muss es größer werden, also entschied ich mich für den Prozentsatz. Aber während die Breite in jeder Spalte gleich ist, zeigt der Browser sie als unterschiedlich an.

https://jsfiddle.net/fu8cp8pb/

.volume-box { 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    width: 50px; 
 
} 
 

 
.volume { 
 
    display: inline-block; 
 
    height: 85%; 
 
    width: 7%; 
 
    background: #00adef; 
 
} 
 

 
.volume.trans { 
 
    background: white; 
 
}

<div class="volume-box"> 
 
    <div class="volume trans" data-value="0"></div> 
 
    <div class="volume" data-value="0.1"></div> 
 
    <div class="volume trans" data-value="0.15"></div> 
 
    <div class="volume" data-value="0.2"></div> 
 
    <div class="volume trans" data-value="0.25"></div> 
 
    <div class="volume" data-value="0.3"></div> 
 
    <div class="volume trans" data-value="0.35"></div> 
 
    <div class="volume" data-value="0.4"></div> 
 
    <div class="volume trans" data-value="0.45"></div> 
 
    <div class="volume" data-value="0.5"></div> 
 
    <div class="volume trans" data-value="0.55"></div> 
 
    <div class="volume" data-value="0.6"></div> 
 
    <div class="volume trans" data-value="0.65"></div> 
 
    <div class="volume" data-value="0.7"></div> 
 
    <div class="volume trans" data-value="0.75"></div> 
 
    <div class="volume" data-value="0.8"></div> 
 
    <div class="volume trans" data-value="0.85"></div> 
 
    <div class="volume" data-value="0.95"></div> 
 
    <div class="volume trans" data-value="1"></div> 
 
</div>

Answer 1

Für die gut aussehen, müssen Sie jede volume eine feste Breite geben, sonst werden Sie von Browsern leiden den Wert 7% verschieden, Runden, die der Grund, es doesn ist‘ t schön aussehen.

.volume-box { 
 
    position: relative; 
 
    cursor: pointer; 
 
    height: 100px; 
 
    display: inline-flex;  /* changed to inline-flex so it will size with content */ 
 
} 
 

 
.volume { 
 
    height: 85%; 
 
    width: 3px;    /* 3px, the closest whole value based on 50px/19 = 2.63 */ 
 
    background: #00adef; 
 
} 
 

 
.volume.trans { 
 
    background: white; 
 
}

<div class="volume-box"> 
 
    <div class="volume trans" data-value="0"></div> 
 
    <div class="volume" data-value="0.1"></div> 
 
    <div class="volume trans" data-value="0.15"></div> 
 
    <div class="volume" data-value="0.2"></div> 
 
    <div class="volume trans" data-value="0.25"></div> 
 
    <div class="volume" data-value="0.3"></div> 
 
    <div class="volume trans" data-value="0.35"></div> 
 
    <div class="volume" data-value="0.4"></div> 
 
    <div class="volume trans" data-value="0.45"></div> 
 
    <div class="volume" data-value="0.5"></div> 
 
    <div class="volume trans" data-value="0.55"></div> 
 
    <div class="volume" data-value="0.6"></div> 
 
    <div class="volume trans" data-value="0.65"></div> 
 
    <div class="volume" data-value="0.7"></div> 
 
    <div class="volume trans" data-value="0.75"></div> 
 
    <div class="volume" data-value="0.8"></div> 
 
    <div class="volume trans" data-value="0.85"></div> 
 
    <div class="volume" data-value="0.95"></div> 
 
    <div class="volume trans" data-value="1"></div> 
 
</div>

Answer 2

Mit einem flexiblen Layout, wenn Sie eine feste Breite in Ihrer flex Kinder wollen, möchten Sie flex-basis statt width verwenden, und wenn Sie wollen sie, um sicherzustellen, Sind alle gleich breit, geben Sie flex-shrink und flex-grow bis 0 an. Oder flex: 0 0 7% für kurz.

.volume-box { 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    width: 50px; 
 
} 
 

 
.volume { 
 
    height: 85%; 
 
    background: #00adef; 
 
    flex: 0 0 7%; 
 
} 
 

 
.volume.trans { 
 
    background: white; 
 
}

<div class="volume-box"> 
 
    <div class="volume trans" data-value="0"></div> 
 
    <div class="volume" data-value="0.1"></div> 
 
    <div class="volume trans" data-value="0.15"></div> 
 
    <div class="volume" data-value="0.2"></div> 
 
    <div class="volume trans" data-value="0.25"></div> 
 
    <div class="volume" data-value="0.3"></div> 
 
    <div class="volume trans" data-value="0.35"></div> 
 
    <div class="volume" data-value="0.4"></div> 
 
    <div class="volume trans" data-value="0.45"></div> 
 
    <div class="volume" data-value="0.5"></div> 
 
    <div class="volume trans" data-value="0.55"></div> 
 
    <div class="volume" data-value="0.6"></div> 
 
    <div class="volume trans" data-value="0.65"></div> 
 
    <div class="volume" data-value="0.7"></div> 
 
    <div class="volume trans" data-value="0.75"></div> 
 
    <div class="volume" data-value="0.8"></div> 
 
    <div class="volume trans" data-value="0.85"></div> 
 
    <div class="volume" data-value="0.95"></div> 
 
    <div class="volume trans" data-value="1"></div> 
 
</div>