当孩子在多线上时根据孩子的宽度调整容器的宽度

Question

我想要一些解决方案来根据孩子在多线时的孩子宽度来调整容器的宽度。当孩子只在一行时，然后显示：容器元素的内联块使我所需要的。但是，当它们在多行上时，容器的行为与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

点击开始页面上看到的网页后，我认为这是你想要的。

Answer 2

#wrapper1{ 
 
    width:1200px; 
 
} 
 
#wrapper2{ 
 
    display:inline-block; 
 
} 
 
.el{ 
 
    width:200px; 
 
    height:200px; 
 
    background:#00F; 
 
} 
 
.ul{ 
 
    padding: 20px; 
 
    float:left; 
 
    width:200px; 
 
    height:200px; 
 
    background: #FF0; 
 
}

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