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

Question

我有一个网站，基于wordpress和响应式设计＆＃34; Mystile＆＃34;。

我使用以下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

最简单的方法就是内联显示图像。如果没有足够的空间放在彼此旁边，它们会在彼此之下缠绕：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<小时/> 如果您想要更高级一些，可以使用media-queries更改不同大小视口的样式：

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

^ Go＆＃39;整页＆＃39;并调整大小看这个工作。