HTML：停止移动视图上的重叠图片（响应式设计）

Question

我有一个基于wordpress和响应式设计“Mystile”的网站。

我用下面的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

最简单的就是直接显示图像。然后，他们将在互相缠绕，如果没有足够的空间，以适应彼此的旁边：

html, body {margin:0;} 
 
.hmm a {display:inline-block; margin:10px 0 0 10px;} 
 
.hmm a img {display:block; margin:0;}

<div class="hmm"><a href="myhref"><img src="http://www.placehold.it/240x50" alt="placeholder" /></a><a href="myhref"><img src="http://www.placehold.it/240x50" alt="placeholder" /></a><a href="myhref"><img src="http://www.placehold.it/240x50" alt="placeholder" /></a></div>

---

如果你想获得更先进一点，你可以使用 media-queries改变针对不同大小的视口的样式：

html, body {margin:0;} 
 
.hmm a {display:inline-block; margin:10px 0 0 10px;} 
 
.hmm a img {display:block; margin:0;} 
 

 
@media all and (max-width: 750px) { 
 
    .hmm a:first-of-type img {width:490px;} 
 
} 
 

 
@media all and (max-width: 510px) { 
 
    .hmm a { 
 
     display: block; 
 
     margin:10px; 
 
    }  
 
    .hmm a img { 
 
     width:100%!important; 
 
    } 
 
}

<div class="hmm"><a href="myhref"><img src="http://www.placehold.it/240x50" alt="placeholder" /></a><a href="myhref"><img src="http://www.placehold.it/240x50" alt="placeholder" /></a><a href="myhref"><img src="http://www.placehold.it/240x50" alt="placeholder" /></a></div>

^去'整页'和调整大小，看看这个工作。