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 ...
随机推荐
- opencv——(动态)旋转图像
#include "stdafx.h" #include <opencv2\opencv.hpp> #include <opencv\cv.h> #incl ...
- Maven整理笔记のMaven使用实践
我们通过实践来补充Maven构建的生命周期. 第一步:配置POM 接着上一篇Maven使用,我们先创建一个名为helloworld的文件夹,在helloworld目录下创建pom.xml文件,pom. ...
- delphi android 录像
delphi xe系列自带的控件都无法保存录像,经网友帮忙,昨天终于实现了录像功能(但有个问题是录像时无画面显示),程序主要使用了JMediaRecorder,MediaRecorder的使用方法可参 ...
- ExtractStrings字符串截取
//分割字符串 ExtractStrings var s: String; List: TStringList; begin s := 'about: #delphi; #pascal, ...
- 学习笔记之Struts2—工作原理图
本文以Struts2的官方工作原理图作为主线讲解(参考部分书籍与视频) 1.初始概念 struts2是web.xml进行配置的一个过滤器,当web项目启动的时候,这个过滤器就会生效. 2.web.xm ...
- Jenkins Pipeline+Maven+Gitlab持续集成构建问题集锦
问题 1.全局配置一定要写正确,之前where git 给的地址时E:\Git\cmd\git.exe一直报错,其实Windows真正的git.exe在bin目录下 如果是Linux中,使用where ...
- java 统计字符串中子字符串个数
方法一: public class StatisticalStringNumber1 { public static void main(String args[]){ String string=& ...
- ViewController关闭自身返回前一个View
点击按钮号响应的函数 @IBAction func onBack(sender : AnyObject) { self.dismissViewControllerAnimated(true, comp ...
- 使用InstallUtil安装或卸载服务
使用InstallUtil安装或卸载服务 一.安装服务: C:\Windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe D:\MyServ ...
- mysqli扩展库应用---程序范例
通过mysqli扩展库对用户表user1进行增删改查操作,用户表user1结构如下: 1,建立数据库操作类库mysqliTool.class.php,代码如下: <?php class mysq ...