在做配置页面的时候,出现一个现在现象,两个同样的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. BHO插件操作IE浏览器,js调用C#方法

    BHO是IE浏览器的扩展程序,全名Browser Helper Object,文件格式为DLL文件.可对IE浏览器的界面和访问内容进行修改操作.BHO只适用于IE浏览器,对其他任何浏览器都没有作用.( ...

  2. JavaScript 用new创建对象的过程

       在JavaScript中创建自定义对象都需要用new运算符,那么创建对象的过程是什么样的呢? 例如现在有如下构造函数: function Person(name) { this.name = n ...

  3. 清北学堂2019NOIP提高储备营DAY3

    今天是钟神讲课,讲台上照旧摆满了冰红茶 目录时间到: $1. 动态规划 $2. 数位dp $3. 树形dp $4. 区间dp $5. 状压dp $6. 其它dp $1. 动态规划: ·以斐波那契数列为 ...

  4. CharSequence与String的区别

    CharSequence与String都能用于定义字符串,但CharSequence的值是可读可写序列,而String的值是只读序列. 原文: http://blog.csdn.net/joy_zha ...

  5. POJ - 2031C - Building a Space Station最小生成树

    You are a member of the space station engineering team, and are assigned a task in the construction ...

  6. threading.local()方法;线程池

    一,threading.local() import time import threading v = threading.local() def func(arg): # 内部会为当前线程创建一个 ...

  7. ACM-ICPC 2018北京网络赛-A题 Saving Tang Monk II-优先队列

    做法:优先队列模板题,按步数从小到大为优先级,PASS掉曾经以相同氧气瓶走过的地方就好了 题目1 : Saving Tang Monk II 时间限制:1000ms 单点时限:1000ms 内存限制: ...

  8. fastcgi main

    main函数里 当kill -TERM pid 时, http://redfoxli.github.io/php-fpm-signals.html  这篇文章 说是 1)master主进程接收到sig ...

  9. docker搭建elk+cerebro环境

    ELK的帮助手册 Docker Hub官网:https://hub.docker.com/r/sebp/elk/ Docker ELK使用文档:http://elk-docker.readthedoc ...

  10. 网络传输层之TCP/UDP详解

    一.运输层协议概述 从通信和信息处理的角度看,运输层向它上面的应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能中的最低层. 运输层的任务就是负责主机中两个进程之间的通信,其数据传输的单 ...