css - 样式 6 图像以内嵌在一行中以用于桌面和对移动方向的响应

Question

我想在行中显示不同大小的图像。 6 张具有适当边距的桌面图片，2 张纵向图片，4 张横向图片。额外的图片应该换行并居中对齐。

<div class="wrapper">
    <div class="media-elements ">
        <div class="common-image">
            <figure class="figure">
                <img src="img1.png" class="img-fluid" alt="" title="">
                <figcaption class="figure-caption">
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="media-elements ">
        <div class="common-image">
            <figure class="figure">
                <img src="img2.png" class="img-fluid" alt="" title="">
                <figcaption class="figure-caption">
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="media-elements ">
        <div class="common-image">
            <figure class="figure">
                <img src="img3.png" class="img-fluid" alt="" title="">
                <figcaption class="figure-caption">
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="media-elements ">
        <div class="common-image">
            <figure class="figure">
                <img src="img4.png" class="img-fluid" alt="" title="">
                <figcaption class="figure-caption">
                </figcaption>
            </figure>
        </div>
    </div>
</div>

我尝试了 float: left 和 display:inline-block 但这些都没有给我预期的结果。提前致谢。

Answer 1

您需要结合使用 flex 查询和媒体查询。我已经为您编译了一个示例，但您可以进一步改进它。

.slider {
    display: flex;
    width: 100%;
    height: auto;
    margin: 20px auto;
    text-align: center;
}

@media only screen and (max-width: 1024px) {
    .slider {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
}

请检查下面的 fiddle 。 https://jsfiddle.net/harsh89/x40kagm6/9/