将 6 张图像的样式设置为内联在一行中，以实现桌面和对移动方向的响应

Question

我想在行中显示不同大小的图像。 6 张图像，桌面边距适当，纵向图像 2 张，横向图像在一行中。额外的图像应位于新行中并居中对齐。

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

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

Answer 2

您可以使用display: grid

.wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
figure img {
width: 100%;
}

JSFiddle： https://jsfiddle.net/y8pLs57g/

Answer 3

试试这个：

.figure {
float: left;
width: 33.33%;
padding: 5px;
}
.common-image::after {
content: "";
clear: both;
display: table;
}