两个非空的<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(){}); 举例:如果 ...
随机推荐
- cocos creator怎么隐藏组件(setVisible)
以 label 为例: this.label.node.active = fasle 隐藏节点this.label.ndoe.active = true显示节点
- linux 下tftpf搭建
什么是TFTP服务 TFTP(Trivial File Transfer Protocol,简单文件传输协议) 是TCP/IP协议族中的一个用来在客户机与服务器之间进行 简单文件传输的协 ...
- 说一说javascript的异步编程
众所周知javascript是单线程的,它的设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI线程一定不能阻塞,否则体验不佳,甚至界面卡死. 所谓的单线程就是一次只能完成一个任务, ...
- Beta阶段敏捷冲刺日志的集合贴
Beta阶段冲刺前计划与安排:http://www.cnblogs.com/software-teamwork/p/9060118.html Day1(5.22):https://www.cnblog ...
- 去掉vim的BELL提示音
title: date: 2017-11-09 15:07:08 tags: vim categories: 开发工具 --- 在vi/vim中使用 :set noeb 意思是noerrorbells ...
- C#简单打印出LIST集合
循环打印集合,打印数组,随手写写,新手可以看看, 结果是不是有一些多余的0,把 int [][] ints =new int[3][]; 改为new int[2][]; 运行出错,哈哈. int ...
- vue mand-mobile ui加class不起作用的问题 css权重问题
vue mand-mobile ui加class不起作用的问题 css权重问题组件的样式优先权比自己定的class高多加几层权重才行,要直接用样式覆盖也可以在前面多加几层class,定位更精确了才会覆 ...
- js 图片无缝滚动
html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...
- Reading comprehension HDU - 4990
Read the program below carefully then answer the question. #pragma comment(linker, "/STACK:1024 ...
- 【 记忆网络 2 】 End-to-End Memory Network
继上一篇:Memory Network 1. 摘要 引入了一个神经网络,在一个可能很大的外部记忆上建立了一个recurrent attention模型. 该体系结构是记忆网络的一种形式,但与该工作中的 ...