我有以下代码显示2个图像旁边彼此:-
<img style="padding-left:25%;margin-top:15px;margin-right:20%" src="~/img/1.png" /><img style="margin-top:15px" src="~/img/2.png" />
如下:-
但在较小尺寸的屏幕上，2个图像将显示在彼此下方（这很好），但它们不会垂直对齐，如下所示:-
那我该怎么解决呢？ 换句话说，如果第二个图像显示在单独的行上，我怎么才能为它添加一个左边距呢？
您将需要使用介质查询:
img {
margin-top:15px;
}
@media screen and (min-width: 768px) {
img {
padding-left:25%;
margin-right:20%;
}
}
768px是任意的，您可以将其更改为您需要的值。 您可以使用min-resolution代替min-width。
您还可以尝试将显示属性与媒体查询一起使用。
<div class="display">
<img style="margin-right: 20px;" src="~/img/1.png" />
<img src="~/img/2.png" />
</div>
.display {
display: flex;
}
@media(min-width: 320px) and (max-width: 767px) {
.display {
display: block;
}
}
您可以使用JavaScript来实现。 在每次调整窗口大小时侦听并计算所有图像的宽度之和是否高于窗口宽度，并根据情况添加边距/填充
window.addEventListener('resize', function(event){ //listen to window resize
let img1w = document.getElementById('image1').offsetWidth;
let img2w = document.getElementById('image2').offsetWidth;
if (img1w + img2w > window.innerWidth) {
document.getElementById('img1w').style.marginLeft = '200px' //just a placeholder. do what you want here
}
});
您也可以使用引导媒体查询，但中断点的数量有限。 因此您必须创建自己的媒体查询
