两个非空的<div>元素inline-block化后出现空白部分解决办法
在涉及到两个<div>元素并列显示的效果时,一般有两种方法:
1.使用float元素让元素并联显示;
2.将块状的<div>元素display设置为inline-block,使其成为线性块状元素,从而具备线性元素的特点,达到并列显示目的;
由于float元素具有:脱离文本流以及使父元素高度塌陷的特性,谨防对后续布局产生影响,故不选用;
但是,将<div>元素inline-block化,由于两个元素遵循其默认的基线对齐的方式,故两个并列显示的<div>元素出现空白部分(如下图)
要解决这个问题,可:
1.将两个<div>元素display:inline-block后,将其vertical-align对齐方式设置为top或者bottom;
2.将第二个<div>元素设置样式:font-size:0;后期再对第二个<div>中的内容的字体分个设置即可;
效果图如下:
两个<div>元素已对齐;空白部分消失
两个非空的<div>元素inline-block化后出现空白部分解决办法的更多相关文章
- 您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应...的解决办法
您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应.……解决办法很简单:1.修改root@localhost权限的密码. 打开wamp的phpmyadmin,进入它的管理界 ...
- dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法
dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法 dedecms出现这个问题与代码无关,主要是和PHP的版本有关,用的PHP5.4,更换成PHP5.2之后就不会有这个问题了. 问题 ...
- div里包含img底部多出3px的解决办法
如果将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来.padding.margin.border都设为0,无效!那么怎么解决这个问题呢? 问题图: 解决后的效果: 这个B ...
- 删除DriverStore\FileRepository文件夹后,设备驱动无法安装,提示“没有为设备信息集或元素选择驱动程序(代码 28)”的解决办法
前言: 我前几天手贱,整个FileRepository删除掉了,之后重启就出现了让人蛋疼的这个问题,因为出于各种原因不想重装系统,百度轮番换搜索词无果,虽然驱动装上了但新设备依然无法自动安装驱动等“一 ...
- layui动态添加的元素click等事件触发不了的解决办法
在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(" ...
- Iphone上对于动态生成的html元素绑定点击事件$(document).click()失效解决办法
在Iphone上,新生成的DOM元素不支持$(document).click的绑定方法,该怎么办呢? 百度了N久都没找到解决办法,在快要走投无路之时,试了试Google,我去,还真找到了,歪国人就是牛 ...
- div里包含img底部必定多出空白的解决办法
研究了很久,自己写了js代码都解决不了.最后还是靠万能的网友解决了这一问题! 问题:adding.margin.border都设为0,无效.怎么样都多出3px. 解决方案: 1.设置div{ font ...
- 使用FastClick的同时造成元素上的trigger('click')无法触发的解决办法
现象还原: 1. 初始化进入多规格卖场商详页的时候,chrome模拟器切换到安卓环境下,点击加入购物车,规格弹出页没有展示.而在PC和IOS模拟器下,可以弹出规格页 2. 点击加入购物车时,使用 $( ...
- jquery中,使用append增加新元素时,新增元素的绑定监听事件失效的解决办法
$("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...
随机推荐
- Spring MVC原理及配置详解
Spring MVC概述: Spring MVC是Spring提供的一个强大而灵活的web框架.借助于注解,Spring MVC提供了几乎是POJO的开发模式,使得控制器的开发和测试更加简单.这些控制 ...
- TableExport导出失败问题
本周有一个需求,将一个网页上一个js导出成csv文件,供数据分析使用 找到一个插件,TableExport,可以很方便的将table导出(默认设置的话,仅需一行代码) 但是,这导出文件较大(6.2M) ...
- JAVA设计模式之静态代理
首先看看什么是代理模式. 一 代理模式 使用一个代理对象将对象包装起来,然后用该代理对象来取代该对象,任何对原始对象的调用都要通过代理,代理对象决定是否以及何时调用原始对象的方法 二 静态模式 要求被 ...
- 揭开yield关键字的神秘面纱
写在前言 经常会看见,python函数中带有yield关键字,那么yield是什么,有什么作用? 答案:可以理解yield是一个生成器: 作用:遇到yield关键字,函数会直接返回yield值,相当于 ...
- js实现多行文本溢出省略
实现效果: css: position: relative; line-height: 20px; max-height: 60px; js: function overflowHiddon(el) ...
- dfs进阶
当自己以为自己深搜(其实就是暴力啦)小成的时候,发现没有题目的积累还是很难写出程序,自己真的是太年轻了:总结一下就是做此类题看是否需要使用vis数组优化以及继续搜索的条件或者满足答案的条件.以下为2题 ...
- 2014年西安区域赛的几道水题(A. F. K)
A . 问一组数能否全部被3整除 K. S1 = A, S2 = B, Si = |Si-1 - Si-2|; 一直循环问, 出现了多少不同的数: 多模拟几组数, 可以发现和辗转相除法有很大关系 ...
- HttpRunner 接口自动化简单实践
1.安装 1.1 命令行pip直接安装就好 1.2 验证安装 命令行输入hrun -V,返回项目版本信息则表明安装成功 2.新建测试项目 这里我用直接通过框架的脚手架工具命令生成目录结构 如:hrun ...
- Scala 偏函数
如果你想定义一个函数,而让它只接受和处理其参数定义域范围内的子集,对于这个参数范围外的参数则抛出异常,这样的函数就是偏函数(顾名思异就是这个函数只处理传入来的部分参数). 偏函数是个特质其的类型为Pa ...
- JAX-WS 使用maven创建
maven 创建jar jar包依赖 <dependency> <groupId>junit</groupId> <artifactId>junit&l ...