在做配置页面的时候,出现一个现在现象,两个同样的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. APUE(5)---标准I/O库 (1)

    一.引言 标准I/O库不仅是UNIX,许多i其他操作系统都实现了标准I/O库,所以这个库由ISO C标准说明.标准I/O库处理很多细节,如缓冲区分配,以及优化的块长度执行I/O等.这使得它便于用户使用 ...

  2. .net Tuple特性

    .net 4.0 引入了 Tuple特性: 在C# 4.0之前我们函数有多个返回值,通常是使用ref,out .到了c# 4.0 应当使用元组Tuple而不是使用输出参数,在任何时候都应避免使用ref ...

  3. INDEX--索引页上存放那些数据

    由于索引的叶子节点和非叶子节点的作用不同,导致不同类型节点上每行记录存放的数据不同--============================================唯一聚集索引叶子节点:所有 ...

  4. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  5. Linux下开放指定端口

    今天Linux测试服务器重启了下 结果导致网站打不开了,ip也能ping通 Apache重启成功,telnet了下80端口结果连不上,这就应该是外网80被防火墙拦截了 后面把80端口开发了下可以了,步 ...

  6. Zeal - 开源离线开发文档浏览器

    https://zealdocs.org/ win10上暂时安装版会crash,请用portalable的解压版

  7. 【总结】 伸展树Splay

    挖坑待补 前言 感觉我在联赛还差4天的时候学习Splay有点慌,但还是要学一下. 定义 我们先对Splay的数组进行一些定义: struct node{ int ff,siz,cnt,ch[2],va ...

  8. jquery遍历-filter()

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [Maven实战-许晓斌]-[第二章]-2.1在Windows上安装maven

    来源:<maven实战>   1.检查JAVA_HOME和java -version C:\Users\admin>echo %JAVA_HOME% C:\Users\admin&g ...

  10. iOS开发之静态库.a 以及合并

    静态库和动态库 静态库和动态库的存在形式静态库: .a 和 .framework 动态库: .dylib 和 .framework 静态库和动态库在使用上的区别静态库:链接时,静态库会被完整地复制到可 ...