浮动的div自适应居中显示的js代码


Posted in Javascript onDecember 23, 2013

当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值)

可以先用jquery获取外围的div随浏览器变化而变化的宽度(加上监听事件)

之后再获取div的宽度 例如:

function autoWidth(){
     var bW = $(".call_man").width();//外围的div
     var popWidth = (bW-150)/2    //(150是div的宽度)
    $(".rts").css("left",popWidth);  //把取得值赋给div 就是div距离左侧的距离
}
autoWidth();
window.onresize = autoWidth;//监听事件
Javascript 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
AngularJS表单验证功能分析
May 26 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
javascript实现简单的Map示例介绍
Dec 23 #Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 #Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 #Javascript
js写的评论分页(还不错)
Dec 23 #Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 #Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 #Javascript
jquery实现图片翻页效果
Dec 23 #Javascript
You might like
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
对Python3 序列解包详解
2019/02/16 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
给男朋友的道歉信
2014/01/12 职场文书
师德师风个人整改措施
2014/10/27 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
公司员工培训管理制度
2015/08/04 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书