在涉及到两个<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化后出现空白部分解决办法的更多相关文章

  1. 您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应...的解决办法

    您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应.……解决办法很简单:1.修改root@localhost权限的密码. 打开wamp的phpmyadmin,进入它的管理界 ...

  2. dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法

    dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法 dedecms出现这个问题与代码无关,主要是和PHP的版本有关,用的PHP5.4,更换成PHP5.2之后就不会有这个问题了. 问题 ...

  3. div里包含img底部多出3px的解决办法

    如果将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来.padding.margin.border都设为0,无效!那么怎么解决这个问题呢? 问题图: 解决后的效果: 这个B ...

  4. 删除DriverStore\FileRepository文件夹后,设备驱动无法安装,提示“没有为设备信息集或元素选择驱动程序(代码 28)”的解决办法

    前言: 我前几天手贱,整个FileRepository删除掉了,之后重启就出现了让人蛋疼的这个问题,因为出于各种原因不想重装系统,百度轮番换搜索词无果,虽然驱动装上了但新设备依然无法自动安装驱动等“一 ...

  5. layui动态添加的元素click等事件触发不了的解决办法

    在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(" ...

  6. Iphone上对于动态生成的html元素绑定点击事件$(document).click()失效解决办法

    在Iphone上,新生成的DOM元素不支持$(document).click的绑定方法,该怎么办呢? 百度了N久都没找到解决办法,在快要走投无路之时,试了试Google,我去,还真找到了,歪国人就是牛 ...

  7. div里包含img底部必定多出空白的解决办法

    研究了很久,自己写了js代码都解决不了.最后还是靠万能的网友解决了这一问题! 问题:adding.margin.border都设为0,无效.怎么样都多出3px. 解决方案: 1.设置div{ font ...

  8. 使用FastClick的同时造成元素上的trigger('click')无法触发的解决办法

    现象还原: 1. 初始化进入多规格卖场商详页的时候,chrome模拟器切换到安卓环境下,点击加入购物车,规格弹出页没有展示.而在PC和IOS模拟器下,可以弹出规格页 2. 点击加入购物车时,使用 $( ...

  9. jquery中,使用append增加新元素时,新增元素的绑定监听事件失效的解决办法

    $("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...

随机推荐

  1. Spring MVC原理及配置详解

    Spring MVC概述: Spring MVC是Spring提供的一个强大而灵活的web框架.借助于注解,Spring MVC提供了几乎是POJO的开发模式,使得控制器的开发和测试更加简单.这些控制 ...

  2. TableExport导出失败问题

    本周有一个需求,将一个网页上一个js导出成csv文件,供数据分析使用 找到一个插件,TableExport,可以很方便的将table导出(默认设置的话,仅需一行代码) 但是,这导出文件较大(6.2M) ...

  3. JAVA设计模式之静态代理

    首先看看什么是代理模式. 一 代理模式 使用一个代理对象将对象包装起来,然后用该代理对象来取代该对象,任何对原始对象的调用都要通过代理,代理对象决定是否以及何时调用原始对象的方法 二 静态模式 要求被 ...

  4. 揭开yield关键字的神秘面纱

    写在前言 经常会看见,python函数中带有yield关键字,那么yield是什么,有什么作用? 答案:可以理解yield是一个生成器: 作用:遇到yield关键字,函数会直接返回yield值,相当于 ...

  5. js实现多行文本溢出省略

    实现效果: css: position: relative; line-height: 20px; max-height: 60px; js: function overflowHiddon(el) ...

  6. dfs进阶

    当自己以为自己深搜(其实就是暴力啦)小成的时候,发现没有题目的积累还是很难写出程序,自己真的是太年轻了:总结一下就是做此类题看是否需要使用vis数组优化以及继续搜索的条件或者满足答案的条件.以下为2题 ...

  7. 2014年西安区域赛的几道水题(A. F. K)

    A . 问一组数能否全部被3整除 K. S1 = A, S2 = B, Si = |Si-1  -  Si-2|; 一直循环问, 出现了多少不同的数: 多模拟几组数, 可以发现和辗转相除法有很大关系 ...

  8. HttpRunner 接口自动化简单实践

    1.安装 1.1 命令行pip直接安装就好 1.2 验证安装 命令行输入hrun -V,返回项目版本信息则表明安装成功 2.新建测试项目 这里我用直接通过框架的脚手架工具命令生成目录结构 如:hrun ...

  9. Scala 偏函数

    如果你想定义一个函数,而让它只接受和处理其参数定义域范围内的子集,对于这个参数范围外的参数则抛出异常,这样的函数就是偏函数(顾名思异就是这个函数只处理传入来的部分参数). 偏函数是个特质其的类型为Pa ...

  10. JAX-WS 使用maven创建

    maven 创建jar jar包依赖 <dependency> <groupId>junit</groupId> <artifactId>junit&l ...