html - 当 child 在多行时根据 child 的宽度调整容器的宽度

Question

我想要一些解决方案，当 child 在多行时根据 child 的宽度调整容器的宽度。当 child 只在一行时，容器元素的 display:inline-block 就满足了我的需要。但是当它们在多行上时，容器的行为就像 display:block 一样。

我所知道的只有两个解决方案:1)将容器最大宽度设置为子宽度的一些乘法。但这不是一个通用的解决方案(我的意思是在分辨率较低的设备上显示)。

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

Answer 1

请测试一下:

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

这是一个示例: Sample

点击起始页，我认为这就是你想要的页面。