如何設置父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> 

查看此以獲取更多信息