浮动的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 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
javascript 闭包详解
Jul 02 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
vue自定义树状结构图的实现方法
Oct 18 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
新52大事件
2020/03/03 欧美动漫
PHP开发大型项目的一点经验
2006/10/09 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
js回调函数原理与用法案例分析
2020/03/04 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python获取url的返回信息方法
2018/12/17 Python
python3实现高效的端口扫描
2019/08/31 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
服务标兵事迹材料
2014/05/04 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
考试没考好检讨书
2015/05/06 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis