当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;//监听事件

浮动的div无论窗口大小变化都能居中显示的js的更多相关文章

  1. div中img依据不同分辨率居中显示,超出部分隐藏

    在做banner居中时 碰到的问题,知道可以用背景图实现居中显示,但是内心是想深究下的,故找到几种办法收集一下,后面两种真的是奇技淫巧 来着下面两处 https://www.zhihu.com/que ...

  2. 浮动后的 <li> 如何在 <ul> 中居中显示?

    百度了许久都没有满意的解决方案,现在终于搞定了. 其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; ...

  3. 图片大于div时的居中显示

    当图片大于div时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个div,如果直接将图片不设置宽高,将其外层div设置overflow:hidden:这时即使外层div设置了水平垂直居 ...

  4. 使DIV相对窗口大小左右拖动始终水平居中

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  5. 监听窗口大小变化,改变画面大小-[Three.js]-[onResize]

    如果没有监听窗口变化,将会出现一下情况: ![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200102081845027-2 ...

  6. 让内层浮动的Div将外层Div撑开 -----清浮动

    清浮动的好处写多了都能体会到,解决高度塌陷, 一般情况下是要清除浮动的,不然会影响下面标签的排版. <div class="parent" style="width ...

  7. Jquery 操作页面中iframe自动跟随窗口大小变化,而页面不出现滚动条,只在iframe内部出滚动条

    很多时候大家需要iframe自适应所加载的页面高度而不要iframe滚动条,但是这次我需要的是页面不需要滚动条而iframe要滚动条,且iframe自动跟随窗口大小变化.自适应页面大小.下面是代码,下 ...

  8. MFC控件随窗口大小变化原理及实现

    本文主要针对MFC的dialog,实现控件随窗口大小变化. 原理:首先获取dialog的初始大小,当窗口发送变动时,调用OnSize事件和方法,计算缩放比例,然后对界面中的所有控件进行缩放和布局. 实 ...

  9. Qt5:随窗口大小变化背景图片自动缩放的实现

    在窗口程序中,当我们改变窗口大小的时候,背景图片通常会岁窗口大小变化而缩放 然而,在我们写的窗口程序中,设置背景图片后,如果缩放大小,会看到背景图片并不会随之缩放, 应为这需要特殊处理,一般常用的方法 ...

随机推荐

  1. 以安装PyTorch为例说明Anaconda在Windows/Linux上的使用

    在Windows10上配置完MXNet 1.3.0后,再配置PyTorch 1.0时,发现两者需要依赖的NumPy版本不一致,之前是通过pip安装NumPy,根据pip的版本不同,会安装不同版本的Nu ...

  2. Android APP性能优化(最新总结)

    导语   安卓大军浩浩荡荡,发展已近十个年头,技术优化日异月新,如今Android 8.0 Oreo 都发布了,Android系统性能已经非常流畅了.但是,到了各大厂商手里,改源码自定系统,使得And ...

  3. 洛谷 CF1043F Make It One 解题报告

    CF1043F Make It One 题意 从一堆数中选择最少的数,使它们的\(\gcd=1\) 输入输出格式 输入格式 第一行:一个正整数\(n\). 第二行:\(n\)个正整数,给出了这个数列. ...

  4. POI 10.28

    [POI2015]KUR 不考虑构造原串再匹配 考虑开始位置满足什么条件才能匹配. 显然,开始位置确定,后面的字符都确定了. 而且,a,n互质,所以必然能遍历n的剩余系,从不同位置开始,初始的a*s+ ...

  5. Markdown资料收集

    教程介绍 原生Markdown不支持表格,表格属于扩展Markdown语法 快速入门:https://github.com/riku/Markdown-Syntax-CN/blob/master/ba ...

  6. 【枚举】 最大子矩阵(I)

    题注:最大子矩形问题的解决办法最初由中国国家集训队王知昆前辈整理并发表为论文,在此说明并感谢. Definition 给你一个大矩形,里面有一些障碍点,求一个面积最大的矩形,满足该矩形在大矩形内部且该 ...

  7. 如何将javascript对象转换成字符串

    将后台程序(如php)发送过来的json数据转化为javascript的数组或者对象的方法十分简单,代码如下: 1 // 假设后台发送的json数据为 '{a:2,b:1}' 存储于str中 2 va ...

  8. Leetcode 381. O(1) 时间插入、删除和获取随机元素 - 允许重复

    1.题目描述 设计一个支持在平均 时间复杂度 O(1) 下, 执行以下操作的数据结构. 注意: 允许出现重复元素. insert(val):向集合中插入元素 val. remove(val):当 va ...

  9. 应用Hash函数

    本文系转载,转自:http://www.blogjava.net/jinfei0627/articles/219543.html 应用Hash函数(java描述) 作者:冲处宇宙 时间:2007.1. ...

  10. Scala环境安装设置

    Scala语言可以安装在任何类UNIX或Windows系统.要安装Scala,必须先安装Java1.5或更高版本安装在计算机上. Windows上安装Scala: 步骤(1):JAVA设置: 首先,必 ...