當孩子在多線上時根據孩子的寬度調整容器的寬度

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>