inline-block,一个奇怪的问题:中间div掉下来
先上代码:
<!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掉下来的更多相关文章
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- SpannableString的一个奇怪的问题
今天使用spannableString遇到一个奇怪的问题,就是在setspan的时候,原本可以写成 spannableString.setSpan(new RelativeSizeSpan(0.5f) ...
- MinGW 和 MSVC 下,使用 FILE 类型的一个奇怪的问题
今天遇到一个奇怪的问题. 开发环境: 1. Eclipse CDT,使用 MinGW 的 gcc 编译器和函数库 2. Visual Studio 2008 问题描述: 在 eclipse cdt 中 ...
- 遇到delphi连接sql一个奇怪的问题:未指定的错误,加大了命令的等待时间为600即可了
遇到delphi连接sql一个奇怪的问题:未指定的错误,加大了命令的等待时间为600即可了 找了一下午没解决.
- 【Windows 7】发现一个奇怪的现象
最近在Windows7-32位操作系统上发现一个奇怪的现象,不知道64位操作系统上会不会发生这个现象.这个现象就是:如果系统上的一个或多个账户没有设置密码,那么在此条件下终止winlogon.exe进 ...
- PHP 浮点型转整型的一个奇怪现象
起因 最近通过一个学长的题了解php弱类型的时候,发现了一个奇怪的现象. 正文 主要问题在这样一段代码: $c=(int)((0.1+$b)*10); 当$b=0.6,0.8以及其他值的时候都正常 将 ...
- chrome一个奇怪的问题
我去........... 这牢骚发完了才发现, 多谢了个e 呃................. ================================= 晚上用bootstrap搭建一 ...
- 一个奇怪的JS函数
今天在分析一个jQuery插件源码的时候,发现了一个奇怪的函数. 这个函数的目的是为数字补零,如传入7,输出07,传入12输出12.由于是对时间补零,只截取后两位. // add leading ze ...
- web3部署智能合约碰到的一个奇怪问题
都是gasLimit惹的祸 解决一个奇怪问题Error: Number can only safely store up to 53 bits 原来好好的node endpointtest.js ,结 ...
- (原)关于OpenSL ES播放音频数据的一个奇怪的问题
关于OpenSL ES播放音频数据的一个奇怪的问题 Author:lihaiping1603@aliyun.com 最近用业余时间做了一个android平台的播放器sdk,其中视频用的opengl e ...
随机推荐
- .net core部署在iis上
部署在Windows Server 2008 R2上,一直安装失败,网上找的资料一直无法解决问题,后来找到了官方的文档, 原来是要安装sp1,大概2g左右,同时也要安装Microsoft Visual ...
- Echarts3.0 引入百度地图(转载)
转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...
- mysql left join的深入探讨
即使你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,但我敢打赌,这篇文章肯定大致也许可能让你学会点东西! ON 子句与 WHERE 子句的不同 一种更好地理解带有 WHERE ... I ...
- php获取服务器信息常用方法(零碎知识记忆)
突然整理下零碎小知识.......加深下印象: $info = array( '操作系统'=>PHP_OS, '运行环境'=>$_SERVER["SERVER_SOFTWARE& ...
- Runnable和Callable接口辨析
突然发现和启动一个线程有关的有三函数,run(), call(), start(),有点小乱,所以特别梳理一下 首先说一下start(),这个是最好说的,感觉start()和run()这俩名字是真的有 ...
- Docker 系列一(概念原理和安装).
一.概念原理 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间 ...
- ES6之Spread Operater拷贝对象
译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Ope ...
- O(n*logn)级别的算法之一(归并排序及其优化)
原理: 设两个有序的子序列(相当于输入序列)放在同一序列中相邻的位置上:array[low..m],array[m + 1..high],先将它们合并到一个局部的暂存序列 temp (相当于输出序列) ...
- C# SqlBulkCopy类批量导入 测试
一.功能说明 1.可以选择,只导入部分列,或者导入全部列. 2.导入速度的确比一般sql要快. 3.不用写sql语句 ----------------------------------------- ...
- MySQL5.7: Paging using Mysql Stored Proc
-- 查询外键 涂聚文 (Geovin Du) select concat(table_name, '.', column_name) as 'foreign key', concat(referen ...