在做配置页面的时候,出现一个现在现象,两个同样的div(外框尺寸也是一样的),div里面包含有三个小的div ,三个小的div宽度也是一样的,同为33.3%,但是出现奇怪现象的就是左边一个有滚动条,右边的没有出现滚动条,

  现象:

  原因分析:

    是因为首先左边的div里面的三个div,是动态拼接而成,并且因为需要,为了横向溢出时出现滚动条,所以设置了每个div为inline-block;就因为首先是拼接而成的,所以存在空白节点的问题,加上为行内元素(如果浮动起来就不存在问题)

    而右边的div中的三个div也是动态拼接的,宽度也是33.3%,但是每一个div是出于浮动状态,所以没有出现溢出的情况,

  

  溢出的宽度为一个空白字符的宽度

  解决空白节点的办法:

    1、为父节点加上一个font-size:0;

    2、元素进行浮动

css消除空白节点的方法的更多相关文章

  1. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  2. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  3. inline-block元素的空白间距解决方法<转>

    使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果.有关于使用inline-block来代替float的讨论也蛮多的. 不过就是使用inline ...

  4. JavaScript的DOM_处理空白节点

    一.空白节点产生的原因 在非 IE6,7,8 中,标准的 DOM 具有识别空白文本节点的功能.  在火狐浏览器等其他浏览器中是 7个,而 IE6,7,8 自动忽略了,如果要保持一致的子元素节点,需要手 ...

  5. [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)

    Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...

  6. CSS实现三列布局方法总结

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl

  7. 因浏览器而异的空白节点(js清除空白节点)

    先看下面的代码:<dl id="dll">  <dt>title</dt>  <dd>definition</dd>&l ...

  8. 为什么要点两下才能删除一个li节点 原来是空白节点作怪

    奇怪吧,下面的代码居然要点两次button才能删除一个li节点: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...

  9. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

随机推荐

  1. js阿拉伯数字转中文大写 方法重多

    方法一  function DX(n) { if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) return "数据非法"; var unit = &qu ...

  2. linux 进阶2--C++读取lua文件中的变量、一维表、二维表

    lua 语言非常灵活,一般把lua 作为脚本文件,会用C++与之进行交互.最重要的是C++代码能读取到脚本中的变量.一维表.二维表. 这样有些参数就可以在lua文件进行更改,而不用重新更改C++代码. ...

  3. vsftpd安装与配置--研究tcp与防火墙

    vsftpd的配置文件 /etc/vsftpd/vsftpd.conf 主配置文件 /usr/sbin/vsftpd Vsftpd的主程序 /etc/rc.d/init.d/vsftpd 启动脚本 / ...

  4. 面试题:给定一个函数rand()能产生1到m之间的等概率随机数,产生1到n之间等概率的随机数?

    虽然TX的面试已经过去好几天了,然而惨痛的过程还历历在目.人生中第一次正式job面试就这么挂掉了.在于面试官的交流过程中,被问及了几个算法设计题,在今后几篇博文中,我一一总结与诸君分享. 1. 给定一 ...

  5. unity面试准备

    最近有换工作的打算 所以上网看下面试题 自己做下总结 Q:ArrayList 和 List区别 A: 1:List大家都知道初始化的时候需要定义其类型,例如 List<int> listT ...

  6. 「HNOI 2014」 画框

    题目链接 戳我 \(Solution\) 这一题很像最小乘积生成树.只是把\(kruskal\)变为了\(km\)/费用流 现在来讲一讲最小乘积生成树.首先将\(\sum a_i\)和\(\sum b ...

  7. GPU大百科全书 第二章 凝固生命的光栅化

    光栅化——死神来了……   前言:在上一期的GPU大百科全书里,我们目睹了可爱的香草从抽象世界走向现实,从方程还原成实体的全过程.可以说香草活了,因为几何单元,我们赋予了她完整的灵魂. 如果你正在为G ...

  8. chipmunk 物理引擎的基本概念和基本用法

    chipmunk是一个开源2D物理引擎, 项目主页:http://code.google.com/p/chipmunk-physics/ 工作需要研究了一下,这个引擎的资料还是不多,我阅读了所有的文档 ...

  9. kali linux之Backdoor-factory

    Backdoor-------python编写 适用于windows PE x32/x64 和Linux ELF x32/x64(OSX),支持msf payload 自定义payload 将shel ...

  10. java 去最后一位字符 str.substring(0,str.length()-1)

    String str = " 中国, 美国 , 意大利 ";String[] arr = str.split(",");for(int i1 =0;i1< ...