我正在制作一个包含多个用户生成的缩略图的幻灯片填充包含div。该布局是响应式的,因此当页面调整大小时,大拇指将叠放在彼此的顶部。有没有什么办法强制父div使用css调整页面大小时紧紧地拥抱内容?下面是一些图片来说明我的问题,我的代码包括在内。获取父级Div拥抱它的页面上的多个浮动子项使用css调整大小
反正有去除图像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>