Inline-Block-Elemente gleichmäßig verteilt in variabler Breite Container

Question

Ich versuche, Inline-Elemente in einem Container mit 90% Breite gleichmäßig zu verteilen. Ich habe bereits nach einer Lösung gesucht und verschiedene Dinge mit null Erfolg probiert.

Die vielversprechendste Idee war, die text-align: justify mit und 100% Breite Kind

Hier ist mein Code:

<div id="stage"> 
     <div class="thumb"> 
      <img src="generic_source" height="200px"/> 
     </div> 
     <div class="thumb"> 
      <img src="generic_source" height="200px"/> 
     </div> 
     . 
     . 
     . 
     . 
    </div> 

CSS:

#stage { 
    width: 90%; 
    margin: 50px auto; 
    text-align: justify; 
    border: 1px solid black; 
} 
#stage::after { 
    display:inline-block; 
    width:100%; 
    content:''; 
} 
.thumb { 
    height: 200px; 
    display: inline-block; 
    margin: 10px; 
    width: 300px; 
    text-align: center; 
    padding: 2px; 
} 

Alles sieht gut aus, außer der Platz links rechts. Ein- und Auszoomen macht es mehr oder weniger offensichtlich, aber offensichtlich dennoch

Ich habe 100+ Daumen, die Ich mag würde symmetrisch

Sie arrangiert, um zu sehen Vielen

EDIT: Hier können Sie das Beispiel sehen . Beachten Sie den Platz links neben der rechten Seite beim Skalieren der Seite

Answer 1

Ich denke, der einzige Weg, es in CSS zu tun ist mit flexbox. Sie müssen #stage Selektor ändern:

#stage{ 
    width: 90%; 
    margin: 50px auto; 
    text-align: justify; 
    border: 1px solid black; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
} 

, wenn Sie es nicht verwenden können (ältere Browser unterstützen müssen) Sie js Lösung wie freewall