在做配置页面的时候,出现一个现在现象,两个同样的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. Android 65536方法数限制的思考

    前言 没想到,65536真的很小. 1 Unable to execute dex: method ID not in [0, 0xffff]: 65536 PS:本文只是纯探索一下这个65K的来源, ...

  2. linux查看日志文件内容命令tail、cat、tac、head、echo详解

    linux查看日志文件内容命令tail.cat.tac.head.echo tail -f test.log你会看到屏幕不断有内容被打印出来. 这时候中断第一个进程Ctrl-C, ---------- ...

  3. VC++中GDI和GDI+ 的坐标系统介绍

    在Windows应用程序中,只要进行绘图,就要使用GDI坐标系统.Windows提供了几种映射方式,每一种映射都对应着一种坐标系.例如,绘制图形时,必须给出图形各个点在客户区的位置,其位置用x 和y两 ...

  4. [LeetCode 题解]: plusOne

    前言   [LeetCode 题解]系列传送门:  http://www.cnblogs.com/double-win/category/573499.html   1.题目描述 Given a no ...

  5. Mathcad操作tips:函数、符号计算

    函数 1. 利用“:”进行函数定义,如 2. 函数支持range variable输入,如 3. 常用数学函数可以在Insert - Function菜单中寻得. 4. 当不确定某个名字是否是函数名时 ...

  6. Transaction And Lock--由Lookup导致的死锁情况

    存在这样情况:1.表TB1有一列建立索引2.事务A对表进行更新,先获取对表的X锁以更新基本表中数据,然后对索引申请X锁以更新索引数据.3.事务B对表进行更新,先获取索引上S锁以使用索引进行Loopup ...

  7. Entity Framework 高性能 泛型缓存+动态Lambda

    前言:自学CSharp挺长时间的了,这是我第一编博客,跟大家分享一下.如有不足地方请多多包涵,也欢迎大家提出更好的意见,下面开始进入正题. 一.泛型缓存 1.概念:1.泛型(泛型也是一种推断类型,从而 ...

  8. OCP 052最新题库还有答案收集整理-第26题

    26.In which state can you back up a database in ARCHIVELOGMODE using RMAN? A. NOMOUNT, MOUNT, AND OP ...

  9. 各大SRC中的CSRF技巧

    本文作者:i春秋签约作家——Max. 一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/ses ...

  10. linux开机后第一个程序--init

    背景知识 计算机启动基本流程如下 1)首先开机自检-POST, 2)自检通过后根据CMOS的配置找到第一个可启动磁盘的MBR中的boot loader程序(一般在启动磁盘的第一个物理扇区,占446字节 ...