获取父级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>

我强烈建议你与断点使用的媒体查询，使这个真正的响应。这将允许您调整不同设备上的拇指宽度。