在此页面上,中间有一个 100% 宽度的启动屏幕,并且每 8 秒旋转一次图形图像。
我在这张幻灯片中有 3 个 div。主 div 包含幻灯片,内部 div 具有中继器背景图像,内部 div 内部具有渐变图像。
问题1。当您尝试缩小浏览器时...网站内容会自行调整并在左侧移动...但是我的幻灯片内容不会...目前我没有内容,但您可以通过以下方式看到这一点黑色边框。幻灯片位于中间。
我该如何解决这个问题?
问题2。一旦浏览器宽度变小并且您加载此页面...幻灯片就会在中心呈现。现在最大化浏览器,您将看到因为幻灯片是在较小的屏幕中渲染的......它将在两侧留下空白,并且 div 不会随浏览器调整大小。
我对此非常反对,所以欢迎任何帮助和建议。
我以前从未使用过 jquery.cycle,但它会根据渲染时的初始浏览器宽度调整宽度。调整浏览器大小后,这些宽度也不会调整,这导致了最终的问题。
查看您的 CSS,您似乎正在尝试直接为这些 div 设置 100% 的宽度(这不会生效,因为 jquery.cycle 直接将宽度应用于覆盖它的元素)。一个直接的解决方案是在 CSS 中的 div 元素的宽度之后立即指定 !important (强制元素直接使用您的 CSS)。
例如(我们以第一个蓝色 div 为例):
.fadein {
width: 100% !important
}
.hd_splash_container_blue {
width: 100% !important
poisition: relative;
}
.main_blue {
margin-left:70px;
margin-right:70px;
position: relative;
}
这应该允许您成功地调整浏览器大小,使内容根据需要居中。
我可能建议在更高的级别应用 CSS,因为每个高级别之间的唯一变化是图像(可以像现在一样完成)。取出其余的 CSS 并在较高级别上应用它:
.hd_splash_container {
width: 100% !important
poisition: relative;
}
.main_color {
margin-left:70px;
margin-right:70px;
position: relative;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)