在CSS移动媒体查询中更改图像布局

Question

我的网页中有三张图片并且在移动设备的响应式CSS媒体查询中，我希望第三张图片位于下一行的中心位置，其中前两位是左侧，一位是左侧，一位是右侧。我不能这样做！我该如何编写这个CSS？

Answer 1

您应该分享您的代码，但我会尽力帮助您。

<div class="main">
<div class="image-left"><img src=""></div>
<div class="image-right"><img src=""></div>
<div class="image-center"><img src=""></div>
</div>

CSS：

.main {
position: relative;
max-width: 100%;
}
.image-left {
  float: left;
}
.image-center {
  margin-top: 5%;
  margin-left: 10% ;
  position: absolute;
}

您需要根据布局调整.image-center {margin-top和margin-left。

如果您需要在左图像和图像右图之间留出空格，则添加另一个类;

.image-right {
margin-left: 10px;
}