Wordpress / HTML 代码：图片无法在移动视图上正确显示

Question

我有一个在线商店，基于 wordpress，主题为“Mystile”。

我用自己的 HTML 和 CSS 代码创建了许多页面，它们在计算机上、在各种浏览器和显示尺寸下看起来都非常好。但是主题的自动移动视图显示所有自编码的东西非常糟糕。

例如：我想并排显示一些图片，所以我使用了这样的 HTML 代码：

<div style="position: absolute;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>
<div style="position: absolute; margin-left: 250px;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>
<div style="position: absolute; margin-left: 500px;"><a href="myhref"><img src="myimgsrc" alt="" /></a></div>

图片会在每台桌面设备上并排显示，但不幸的是在移动视图上并没有显示。

在其他主题的移动视图上，您​​肯定会注意到视图的定义宽度，因此我的图片以适合移动视图的方式显示。在我当前的主题中，情况并非如此，似乎移动视图只是整个网站的一种转换，而不是一个明确定义的显示内容的框。

我真的卡在这里，因为该网站已完成编码，它在计算机上看起来非常好，在任何显示尺寸等上。只有移动视图才是问题所在。

我能做什么和应该做什么？

谢谢！

Answer 1

Mystile 主题是一个响应式主题，并有一个所谓的“视口”元数据，以确保呈现的尺寸最适合设备：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

您用于图像的定位不响应设备宽度，因为您使用的是绝对定位（在您的情况下：第一张图像左侧：0px，第二张左侧：250px，第三张是左：500 像素）。

总体而言，绝对定位被认为是不好的做法（如果您尝试响应式），我建议的解决方案是制作图像 inline-block 并在它们不再适合时缩小它们。这样你就可以在大屏幕上获得你想要的东西，如果屏幕变小，一切都会缩小。

.wrap {
    font-size: 0px;
    margin: 0;
    padding: 0;
}
.singleimage {
    display: inline-block;
    max-width: 33.3%;
}
.scaleimage {
    width: 100%;
}

    <div class="wrap">
        <div class="singleimage"><a href="myhref"><img src="http://lorempixel.com/250/250" class="scaleimage" alt="" /></a></div>
        <div class="singleimage"><a href="myhref"><img src="http://lorempixel.com/250/250" class="scaleimage" alt="" /></a></div>
        <div class="singleimage"><a href="myhref"><img src="http://lorempixel.com/250/250" class="scaleimage" alt="" /></a></div>
    </div>