让父 Div 在使用 css 调整页面大小时拥抱它的多个浮动子项

Question

我正在制作一个幻灯片，其中包含多个用户生成的缩略图填充一个包含的 div。布局是响应式的，因此当页面调整大小时，拇指将相互堆叠。仅使用 css 调整页面大小时，有什么方法可以强制父 div 紧紧拥抱内容？下面是一些图片来说明我的问题，并包含我的代码。

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">

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

</div>

编辑 - 我已经更改了 sn-p 以更好地代表我想要完成的工作，它可以工作，但它很丑陋，当父级变得太大时，浏览器滚动条可能会通过媒体标签搞乱更改给多个孩子。所以我想我现在的问题是，有没有更好的方法可以在没有多个媒体标签的情况下实现这一目标？

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">

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

</div>
</div>

Answer 1

假设您也希望缩略图保持方形。您将不得不使用百分比而不是固定宽度来做一个简单的填充技巧。

从您的图片中可以看出，您希望在更大的屏幕上显示 6 个框。因此，您需要将块分成 16.6666% 的宽度，即父容器宽度的 1/6。要使这个 hack 起作用，您需要从 .child 元素中删除高度，而是使用 :after 伪元素，填充底部为 100%，这将确保元素保持方形。填充是基于宽度的，所以无论宽度如何，填充都会匹配它。

最后，您需要在子元素中添加一个绝对定位元素。

解决方案如下：

.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>

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