子が複数行にある場合は、子の幅に応じてコンテナの幅を調整します

debugcn 投稿 Dev

パベル・ニェメク

子が複数行にある場合、子の幅に応じてコンテナの幅を調整するソリューションが必要です。子が1行しかない場合は、container要素のdisplay：inline-blockで必要なものを作成します。ただし、複数行にある場合、コンテナはdisplay：blockと同じように動作します。

私が知っている解決策は2つだけです。1）コンテナのmax-widthを子の幅の乗算として設定します。しかし、それは普遍的な解決策ではありません（つまり、解像度の低いデバイスでの表示を意味します）。

2）jQueryを使用してコンテナの幅を計算します。しかし、私はむしろ純粋なHTML / CSSソリューションを使用したいと思います。

HTML：

 <div id="wrapper1">     
    <div id="wrapper2">                
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>        
    </div>         
</div> 


  <div id="wrapper2">                
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>        
  </div>         
</div>

CSS：

#wrapper1{
  max-width:1200px;
  margin:auto;
}
#wrapper2{
  background: #FF0;
  display:inline-block;
}
.el{
  float:left;
  margin:10px;
  width:200px;
  height:200px;
  background:#00F;
}

ファルジンカンジ

これをテストしてください：

#wrapper1{
display: -webkit-flex; 
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;  
flex-wrap: wrap;
justify-content: center;
-webkit-justify-content: center;
}

#wrapper2{
max-width:880px;
display: -webkit-flex; 
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;  
flex-wrap: wrap;
justify-content: space-between;
-webkit-justify-content: space-betweeen;
}

サンプルは次のとおりです。サンプル

スタートページをクリックして、それがあなたが望むものだと思った後のページを見てください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]