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>

^ 转到“整页”并调整大小以查看此内容是否正常工作。