先上代码:

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
html body {
padding: 0;
margin: 0
}
</style>
</head> <body> <div >
<div style="width: 30%;background:blue;height: 500px;display: inline-block;font-size: 15px"></div>
<div style="width:30%;;height: 500px;background: green;display: inline-block;font-size: 15px; "> </div>
<div style="width:30%;background: red;height: 500px;display: inline-block;font-size: 15px"></div> </div>
</body> </html>

运行后效果如下:

图上可以看出,这里存在两个问题:1、div之间有间隙  2、如果在中间添加内容,会出现诡异效果:

怎么解决?

1、解决间隙,把父元素的font-size的设置为0

2、把加内容的的div增加样式:vertical-align:top

注意:不要忘了把中间div加font-size:15px

inline-block,一个奇怪的问题:中间div掉下来的更多相关文章

  1. DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  2. SpannableString的一个奇怪的问题

    今天使用spannableString遇到一个奇怪的问题,就是在setspan的时候,原本可以写成 spannableString.setSpan(new RelativeSizeSpan(0.5f) ...

  3. MinGW 和 MSVC 下,使用 FILE 类型的一个奇怪的问题

    今天遇到一个奇怪的问题. 开发环境: 1. Eclipse CDT,使用 MinGW 的 gcc 编译器和函数库 2. Visual Studio 2008 问题描述: 在 eclipse cdt 中 ...

  4. 遇到delphi连接sql一个奇怪的问题:未指定的错误,加大了命令的等待时间为600即可了

    遇到delphi连接sql一个奇怪的问题:未指定的错误,加大了命令的等待时间为600即可了 找了一下午没解决.

  5. 【Windows 7】发现一个奇怪的现象

    最近在Windows7-32位操作系统上发现一个奇怪的现象,不知道64位操作系统上会不会发生这个现象.这个现象就是:如果系统上的一个或多个账户没有设置密码,那么在此条件下终止winlogon.exe进 ...

  6. PHP 浮点型转整型的一个奇怪现象

    起因 最近通过一个学长的题了解php弱类型的时候,发现了一个奇怪的现象. 正文 主要问题在这样一段代码: $c=(int)((0.1+$b)*10); 当$b=0.6,0.8以及其他值的时候都正常 将 ...

  7. chrome一个奇怪的问题

    我去........... 这牢骚发完了才发现,  多谢了个e 呃................. ================================= 晚上用bootstrap搭建一 ...

  8. 一个奇怪的JS函数

    今天在分析一个jQuery插件源码的时候,发现了一个奇怪的函数. 这个函数的目的是为数字补零,如传入7,输出07,传入12输出12.由于是对时间补零,只截取后两位. // add leading ze ...

  9. web3部署智能合约碰到的一个奇怪问题

    都是gasLimit惹的祸 解决一个奇怪问题Error: Number can only safely store up to 53 bits 原来好好的node endpointtest.js ,结 ...

  10. (原)关于OpenSL ES播放音频数据的一个奇怪的问题

    关于OpenSL ES播放音频数据的一个奇怪的问题 Author:lihaiping1603@aliyun.com 最近用业余时间做了一个android平台的播放器sdk,其中视频用的opengl e ...

随机推荐

  1. .net core部署在iis上

    部署在Windows Server 2008 R2上,一直安装失败,网上找的资料一直无法解决问题,后来找到了官方的文档, 原来是要安装sp1,大概2g左右,同时也要安装Microsoft Visual ...

  2. Echarts3.0 引入百度地图(转载)

    转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...

  3. mysql left join的深入探讨

    即使你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,但我敢打赌,这篇文章肯定大致也许可能让你学会点东西! ON 子句与 WHERE 子句的不同 一种更好地理解带有 WHERE ... I ...

  4. php获取服务器信息常用方法(零碎知识记忆)

    突然整理下零碎小知识.......加深下印象: $info = array( '操作系统'=>PHP_OS, '运行环境'=>$_SERVER["SERVER_SOFTWARE& ...

  5. Runnable和Callable接口辨析

    突然发现和启动一个线程有关的有三函数,run(), call(), start(),有点小乱,所以特别梳理一下 首先说一下start(),这个是最好说的,感觉start()和run()这俩名字是真的有 ...

  6. Docker 系列一(概念原理和安装).

    一.概念原理 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间 ...

  7. ES6之Spread Operater拷贝对象

    译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Ope ...

  8. O(n*logn)级别的算法之一(归并排序及其优化)

    原理: 设两个有序的子序列(相当于输入序列)放在同一序列中相邻的位置上:array[low..m],array[m + 1..high],先将它们合并到一个局部的暂存序列 temp (相当于输出序列) ...

  9. C# SqlBulkCopy类批量导入 测试

    一.功能说明 1.可以选择,只导入部分列,或者导入全部列. 2.导入速度的确比一般sql要快. 3.不用写sql语句 ----------------------------------------- ...

  10. MySQL5.7: Paging using Mysql Stored Proc

    -- 查询外键 涂聚文 (Geovin Du) select concat(table_name, '.', column_name) as 'foreign key', concat(referen ...