-1

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

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

例如：我想将主页上的一些图片分开，它们放在彼此下方，用一条简单的线。所以我使用了这样的 HTML 代码：

<div style="position: relative; bottom: 10px;">___________________________________________________________________________________________________________________</div>

这条线的长度正好合适，分离看起来很好。但是当然网站的移动视图的宽度比桌面视图的宽度要小得多，所以这个分隔线在智能手机上看起来很糟糕。

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

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

我可以而且应该做什么？

4

1 回答 1

0

<hr/>您可以使用标签，而不是使用带下划线的 div 。

在下面的示例中，您可以调整容器的大小，并且线条将始终为 100% 宽度。你甚至可以使用 CSS 来设置线条的样式。

div {
  background: #F7F7F7;
  border: 1px solid black;
  padding: 24px;
  overflow: auto;
  resize: horizontal;
  width: 200px;
}
img {
  width: 100%;
  height: auto;
}
<div>
  <img src="http://lorempixel.com/200/200">
  <hr/>
  <img src="http://lorempixel.com/200/200">
</div>

于 2015-02-23T22:00:44.973 回答