獲取父級Div擁抱它的頁面上的多個浮動子項使用css調整大小

Question

我正在製作一個包含多個用戶生成的縮略圖的幻燈片填充包含div。該佈局是響應式的，因此當頁面調整大小時，大拇指將疊放在彼此的頂部。有沒有什麼辦法強制父div使用css調整頁面大小時緊緊地擁抱內容？下面是一些圖片來說明我的問題，我的代碼包括在內。

Layout before resize

What I want to do

反正有去除圖像2中的額外的空間？

.parent{background-color:#003300; overflow: auto; padding:0px 20px 20px 0px; position: absolute;} 
 

 
.child{ width:100px; height:100px; float:left; background-color:#000066; margin:20px 0px 0px 20px;}

<div class="parent"> 
 

 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 

 
</div>

編輯 - 我已經改變了片段，以更好地代表什麼，我要完成的，它的工作原理，但它的醜陋和瀏覽器的滾動條可以搞砸通過改變當父母由於多個孩子而變得太大時媒體標籤。所以我現在想我的問題，有沒有更好的方式來實現這個沒有多媒體標籤？

body { margin:0; padding:0;} 
 

 
.cnt{text-align:center; max-width:960px; background-color:#000000; margin:0px auto; overflow:hidden} 
 

 
.parent{background-color:#003300; overflow: auto; padding:0px 20px 20px 0px;display:inline-block} 
 

 
.child{ width:100px; height:100px; float:left; background-color:#000066; margin:20px 0px 0px 20px; text-align:center; line-height:100px; font-size:36px} 
 

 

 
@media (max-width:740px) and (min-width:621px){.child:nth-child(5n+6){ clear:both;}} 
 
@media (max-width:620px) and (min-width:501px){.child:nth-child(4n+5){ clear:both;}} 
 
@media (max-width:500px) and (min-width:381px){.child:nth-child(3n+4){ clear:both;}} 
 
@media (max-width:380px) and (min-width:261px){.child:nth-child(2n+3){ clear:both;}} 
 
@media (max-width:260px) and (min-width:0px){.child{clear:both;}}

<div class="cnt"> 
 
<div class="parent"> 
 

 
\t <div class="child">1</div> 
 
\t <div class="child">2</div> 
 
\t <div class="child">3</div> 
 
\t <div class="child">4</div> 
 
\t <div class="child">5</div> 
 
\t <div class="child">6</div> 
 

 
</div> 
 
</div>

Answer 1

假設你想保持縮略圖方形爲好。你將不得不使用百分比而不是固定寬度來進行簡單的填充黑客攻擊。

從我的照片中可以看出，你想要6個盒子在大屏幕上顯示。所以你需要將塊分成16.6666％的寬度，這是父容器寬度的1/6。爲了使這個hack工作，你將需要從.child元素中刪除高度，而是使用：在填充底部爲100％的psuedo元素之後，這將確保元素保持正方形。填充是基於寬度的，所以不管寬度如何，填充都會匹配它。

最後，你需要一個絕對定位的元素在子元素內。下面

解決方案：

.parent{ 
 
     background-color:#003300; 
 
     overflow:hidden; 
 
     max-width:960px; 
 
} 
 
.child { 
 
    position: relative; 
 
    width:16.6666%; 
 
    float:left; 
 
    box-sizing: border-box; 
 
} 
 
.child:after { 
 
    content: ""; 
 
    display: block; 
 
    padding-bottom: 100%; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 5%; 
 
    background-color:#000066; 
 
    width: 90%; 
 
    height: 90%; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
</div>

我強烈建議你與斷點使用的媒體查詢，使這個真正的響應。這將允許您調整不同設備上的拇指寬度。