解决discuz轮播图在宽窄屏切换时无法自适应的错位问题(修改和固定整个页面的宽度)
来源:互联网 发布:linux系统主要用途 编辑:程序博客网 时间:2024/04/27 15:44
轮播图做好之后,发现切换宽窄屏时会出现错位问题,原本美美哒轮播图因此变得不美观了。
调整图片在宽屏下的尺寸,切换成窄屏后图片会错位~
原本窄屏下的样子:
而切换成宽屏后变成了这样:
调整图片在窄屏下的尺寸,切换成宽屏后图片也会错位~
轮播图会覆盖右边的文字,如图:
想了一会儿,突然想到可以通过固定整个页面的宽度来解决这个问题,具体的修改如下:(由于屏太宽或太窄都会影响整个页面的视觉效果,所以可将宽度设为1120px,此处以此宽度做示例,大家也可修改为自己想要的宽度)
解决办法:修改行间样式
(一)修改头部和主体的宽度
1、根据以下文件路径找到header.html文件:template/default/common/header.html,修改以下三个地方的样式,即加入行间样式style="width:1120px;margin:0 auto;"或style="width:1120px;"
(1)<div id="toptb" class="cl">加入样式style="width:1120px;margin:0 auto;" ,即改为<div id="toptb" class="cl" style="width:1120px;margin:0 auto;">,如图:
(2)<div class="wp">加入样式style="width:1120px;margin:0 auto;" ,即改为<div class="wp" style="width:1120px;margin:0 auto;">,如图:
以上两步可修改头部的宽度。
(3)本文件最后一行代码<div id="wp" class="wp" >即可修改主体宽度,加入样式style="width:1120px;",即改为<div id="wp" class="wp" style="width:1120px;">,如图:
(二)修改底部宽度
此时上传代码刷新后,发现底部的宽度和上半部分不和谐,所以还需更改底部的宽度。根据以下文件路径找到footer.html文件:template/default/common/footer.html,找到<div id="ft" class="wp cl">,加入行间样式style="width:1120px;margin:0 auto;",即改为<div id="ft" class="wp cl" style="width:1120px;margin:0 auto;">,如图:
用ftp上传之后,进入网站刷新页面,即可看到最终效果,此时,在宽屏窄屏下都没有烦恼了,无论怎么切换,都不会再错位,(因为宽度有所变化,可能会影响之前做好的轮播图效果,此时只需重新diy一下图片的尺寸和帖子的数量,直到达到自己想要的效果即可),如图:
第一次发文,有什么不对的地方欢迎大家指正哟~
- 解决discuz轮播图在宽窄屏切换时无法自适应的错位问题(修改和固定整个页面的宽度)
- 如何解决固定宽度尺寸网页,在小屏幕下背景色无法填充完整的问题
- 关于在有限的宽度和高度下Jquery中的Dialog显示发生错位的问题
- 负边距(negative margin)实现自适应的div左右排版(一个宽度固定一个宽度自适应)”
- 主要内容宽度固定的自适应头部
- 宽度固定,高度自适应的imageview
- css的高端和宽度自适应问题
- 整个页面固定宽度且归中
- 和3个div在一行,前两个固定宽度,最后一个自适应问题
- ExtJs 解决在GridPanel中使用bbar或者tbar的分页条的宽度自适应问题
- 求css左侧宽度固定右侧宽度自适应的办法
- xib table 固定宽度上的自适应宽度
- bootstrap表格如何固定宽度或者自适应内容的宽度
- frameset 固定宽度的问题
- 百度echart图表宽度自适应问题的一种解决思路
- 解决TextView错位的问题
- 解决图片错位的问题
- 图片在已固定宽度的DIV及TABLE中自适应
- shell批量将文件从dos格式转为Unix
- Codeforces 144D Missile Silos(SPFA最短路)
- LCD1602液晶显示+超声波测距-51单片机
- Linux命令行学习之路(一)
- 神经网络中误差反向传播(back propagation)算法的工作原理
- 解决discuz轮播图在宽窄屏切换时无法自适应的错位问题(修改和固定整个页面的宽度)
- Educational Codeforces Round 4:(612A:枚举、 612B:水 、 612C:stack、612D:sort )
- python异常处理
- struts2学习前的准备
- TableView
- JavaSE入门学习15:Java面向对象之继承
- Android Studio bug:Error:Could not run build action using Gradle distribution 'https://services.grad
- 【免翻墙】搭建Android开发环境
- vijos P1320 清点人数 题解