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，第三个图像在左：500px）。

总的来说，绝对定位被认为是一种糟糕的做法（如果你尝试的是有响应的东西），我建议的解决方案是将图像设为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>