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

＆＃13;

.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*/
    }

＆＃13;

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

＆＃13;

Check out this for more info

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

1 个答案: