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

Question

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

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

问题： 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>

Check out this for more info

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

How to set the parent div width to match the a/img?

html

css

image

division