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

Question

I want to have 4 images in a line, equally spaced. Then when the screen size is of a particular resolution, i want 2 images to drop to the line below.

Setting the 4 images in a line, equally spaced is the easy part. I'm struggling to get two of the images on the line below. My thought is to wrap two images in a div and do this twice. So there is two divs, with 2 images in them each. When the screen resolution is large, set the divs to inline-blocks . Then when the resolution drops too low, set the divs to block.

The issue: The div's width will not match the width of the two images. Instead, the divs span across the entire width of its parent div.

How do I fix this? Or is there a different way that's better?

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> 

Thanks

Answer 1

You can use media query to achieve what you want like this:

Here a working JSFiddle to play with

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

Check out this for more info