jquery - 简单的 jquery 幻灯片放映相对位置

Question

我以为我在这里找到了答案:SO question

不幸的是，虽然它在 PC 上看起来不错，但在手机上查看时文本会被旋转的图像覆盖。

我的 CSS 类当前设置如下:

.fadein { position:relative; margin-left:auto; width:300px; height:300px; }
.fadein img { position:absolute; left:0; top:0; }

可在此处查看网站:YIS website

谁能建议我是否可以进行任何 CSS 更改以防止图片覆盖文本而不会遇到下一张图片与上一张图片分开的先前问题。

Answer 1

实际上，如果你缩小任何浏览器的宽度，内容都会被覆盖。

删除#intro float 属性并添加:

display: inline-block;
vertical-align: top;

#intro 和.fadein

它的作用是将每个 block 显示为一个内联 block ，这意味着，如果有空间，它们将水平显示，当它被缩小时，它将换行；但是，还有另一件事会阻止这种包装正常发生，即#intro 的相对宽度。现在，您可以保留它，但也可以添加:

min-width: someWidthInReaUnits

一旦达到最小宽度，这将使文本强制图像 div 换行。

最后，您可以根据需要使用边距微调两个元素的位置。