インラインブロック要素が可変幅のコンテナ内に均等に配置されています

Question

90％幅のコンテナ内にインライン要素を均等に配置しようとしています。私はすでに解決策を探して、成功しなかった別のものを試しました。

最も有望なアイデアは、テキスト、整列した：ここで

をして正当化し、100％の幅子は私のコードです：

<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; 
} 

すべては除いて素晴らしく見えますスペースは右側に残っています。ズームインとアウトは、それが多かれ少なかれ明白になりますが、明らかにそれにもかかわらず

私は私が対称的に

ありがとう配置された見たい100+の親指を持って

編集：ここでは あなたが例を見ることができます。ページを拡大するときに右側の境界線に残っているスペースを確認してください。

Answer 1

私はCSSでそれを行う唯一の方法はフレックスボックスを使用することだと思います。

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

あなたがそれを使用できない場合（古いブラウザをサポートする必要があります）あなたはあなたが[MCVE]というを提供する必要がありますfreewall