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

原因分析:
是因为首先左边的div里面的三个div,是动态拼接而成,并且因为需要,为了横向溢出时出现滚动条,所以设置了每个div为inline-block;就因为首先是拼接而成的,所以存在空白节点的问题,加上为行内元素(如果浮动起来就不存在问题)
而右边的div中的三个div也是动态拼接的,宽度也是33.3%,但是每一个div是出于浮动状态,所以没有出现溢出的情况,
溢出的宽度为一个空白字符的宽度
解决空白节点的办法:
1、为父节点加上一个font-size:0;
2、元素进行浮动
css消除空白节点的方法的更多相关文章
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- 【转】CSS z-index 属性的使用方法和层级树的概念
文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...
- inline-block元素的空白间距解决方法<转>
使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果.有关于使用inline-block来代替float的讨论也蛮多的. 不过就是使用inline ...
- JavaScript的DOM_处理空白节点
一.空白节点产生的原因 在非 IE6,7,8 中,标准的 DOM 具有识别空白文本节点的功能. 在火狐浏览器等其他浏览器中是 7个,而 IE6,7,8 自动忽略了,如果要保持一致的子元素节点,需要手 ...
- [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)
Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...
- CSS实现三列布局方法总结
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl
- 因浏览器而异的空白节点(js清除空白节点)
先看下面的代码:<dl id="dll"> <dt>title</dt> <dd>definition</dd>&l ...
- 为什么要点两下才能删除一个li节点 原来是空白节点作怪
奇怪吧,下面的代码居然要点两次button才能删除一个li节点: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
- vue打包后显示空白正确处理方法
vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...
随机推荐
- APUE(5)---标准I/O库 (1)
一.引言 标准I/O库不仅是UNIX,许多i其他操作系统都实现了标准I/O库,所以这个库由ISO C标准说明.标准I/O库处理很多细节,如缓冲区分配,以及优化的块长度执行I/O等.这使得它便于用户使用 ...
- .net Tuple特性
.net 4.0 引入了 Tuple特性: 在C# 4.0之前我们函数有多个返回值,通常是使用ref,out .到了c# 4.0 应当使用元组Tuple而不是使用输出参数,在任何时候都应避免使用ref ...
- INDEX--索引页上存放那些数据
由于索引的叶子节点和非叶子节点的作用不同,导致不同类型节点上每行记录存放的数据不同--============================================唯一聚集索引叶子节点:所有 ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- Linux下开放指定端口
今天Linux测试服务器重启了下 结果导致网站打不开了,ip也能ping通 Apache重启成功,telnet了下80端口结果连不上,这就应该是外网80被防火墙拦截了 后面把80端口开发了下可以了,步 ...
- Zeal - 开源离线开发文档浏览器
https://zealdocs.org/ win10上暂时安装版会crash,请用portalable的解压版
- 【总结】 伸展树Splay
挖坑待补 前言 感觉我在联赛还差4天的时候学习Splay有点慌,但还是要学一下. 定义 我们先对Splay的数组进行一些定义: struct node{ int ff,siz,cnt,ch[2],va ...
- jquery遍历-filter()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Maven实战-许晓斌]-[第二章]-2.1在Windows上安装maven
来源:<maven实战> 1.检查JAVA_HOME和java -version C:\Users\admin>echo %JAVA_HOME% C:\Users\admin&g ...
- iOS开发之静态库.a 以及合并
静态库和动态库 静态库和动态库的存在形式静态库: .a 和 .framework 动态库: .dylib 和 .framework 静态库和动态库在使用上的区别静态库:链接时,静态库会被完整地复制到可 ...