Question

我该如何解决这个问题？在桌面版本中一切正常，但在移动版本页面重叠。不知道该怎么做：D enter image description here

代码：

Answer 1

如果您向我们展示一些代码以了解您的方案，我们会感激不尽。无论如何我认为我得到了你需要的东西。

使用相对位于绝对容器内的容器。给他们一个宽度。让它们向左浮动。当您想要更改时，使用@media标签调整它们的大小。

这是正确的工作方式。首先定义小型设备，然后调整大小。当你想要包裹普通（非弯曲）盒子时，你可以使用相对定位。

我举个例子。我开始为小型设备提供100％的宽度，并且我为大屏幕调整大小为50％（在示例中，我以500px进行更改，但您可以使用其他）。看看。在全屏幕上运行代码段以查看更改并将浏览器屏幕的大小调整到最小。或者复制粘贴代码并试一试。

你的容器看起来似乎绝对定位。

.absolute {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.one {
display:block;
float:left;
text-align:center;
position:relative;
width:100%;
height:50px;
background:#f1f0f1;
}
.two {
display:block;
float:left;
text-align:center;
position:relative;
width:100%;
height:50px;
background:#a0aca0;
}
@media only screen and (min-width:500px) {
.one, .two {
width:50%;
}
}

<div class="absolute">
  <div class="one"> PEACE </div>
  <div class="two"> IN THE WORLD </div>
</div>

如何修复这两页重叠？

1 个答案: