如何设置父div宽度以匹配a / img？

Question

我想一行中有4张图像，等距排列。 然后，当屏幕尺寸为特定分辨率时，我希望将2张图像拖放到下面的行。

将4张图像排成一行，等距排列是容易的部分。 我正在努力在下面的行中获取两个图像。 我的想法是将两个图像包装在div中，然后执行两次。 因此，有两个div，每个div中都有2张图片。 当屏幕分辨率较大时，将div设置为inline-blocks 。 然后，当分辨率下降得太低时，将div设置为block。

问题： div的宽度与两个图像的宽度不匹配。 而是，div跨越其父div的整个宽度。

我该如何解决？ 还是有其他更好的方法？

JSFiddle

 .Containter{ text-align: center; display: inline-block; margin: 0 auto; border: 1px solid red; } .Sections{ display: inline-block; margin: 0 auto; border: 1px solid green; } .Sections>a{ border: 1px solid brown; } .Photo{ width: 20%; height: auto%; border-radius: 10px; /*margin: 0px 15px 0px 15px;*/ border: 1px solid blue; } 

 <div class="Containter"> <div class="Sections"> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> </div> <div class="Sections"> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> </div> </div> 

谢谢

Answer 1

您可以使用媒体查询来实现所需的结果：

这是一个可以工作的JSFiddle

 .Containter { text-align: center; display: inline-block; margin: 0 auto; border: 1px solid red; } .Sections { display: inline-block; margin: 0 auto; border: 1px solid green; } .Sections>a { border: 1px solid brown; } .Photo { width: 20%; height: auto%; border-radius: 10px; /*margin: 0px 15px 0px 15px;*/ border: 1px solid blue; } @media (max-width: 768px) { /*change to desired resolution*/ .Photo { width: 45%; /*change to desired width*/ } 

 <div class="Containter"> <div class="Sections"> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> <a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"><img class="Photo" src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg"/></a> </div> </div> 

查看此以获取更多信息