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 ...
随机推荐
- C#操作DataTable类
一.DataTable简介 (1)构造函数 名称 说明 DataTable() 不带参数初始化DataTable 类的新实例 DataTable(string tableName) 用指定的表名初始 ...
- 水晶报表Crystal 无效索引
这几天项目用到水晶报表做报表打印,没有前辈指导,都自己摸着石头过河,真是痛并快乐着.其实水晶报表还是挺好用的,对初学者也并不难(我就是初学者).昨天遇到一个问题:无效索引 ……开始以为是报表设置的问题 ...
- 数据库_Redis 入门基础到高级
一.PHP消息队列实现及应用 二.消息队列的优缺点 三.消息队列的配置和准备工作 案例如下: 下面是队列表字段及属性 四.Mysql订单队列 1.接受订单,并写入数据 order.php <?p ...
- 填一个laravel视图缓存没有及时更新的坑
1.此坑背景 laravel在渲染blade模板后,会将渲染好的结果存到storage/framework/views(默认路径,也可在配置中修改的)中,以便下次使用.但我最近总是发现修改了blade ...
- ASPxGridView 添加勾选列--全选 和 后端获取勾的行ID
一.HTML 代码 <table style="width: 100%;"> <tr> <td> <asp:Button ID=" ...
- C#导入Excel、Excel导入、导入.xls 、导入.xlsx、Excel2003版本、Excel2007版本
C#导入Excel: 1.选择Excel 03版文件 2.选择需要读取数据的Excel工作表 3.选择工作表中需要读取的列 源码地址在图片下面,不要点击图片,点击下载地址跳转下载.
- JS中replace替换全部的正确应用
一般使用 var str = "test-test-test"; str = "test-test-test".replace("test" ...
- POJ3683 Priest John's Busiest Day(2-SAT)
Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11049 Accepted: 3767 Special Judge ...
- Git .gitignore文件简介及使用
Git .gitignore文件简介及使用 By:授客 QQ:1033553122 .gitignore 这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中.实际项目中,很多文件都是不需要版本 ...
- Testlink1.9.17使用方法(第八章 测试执行/报告BUG)
第八章 测试执行/报告BUG QQ群交流:585499566 把他们放到一起,是因为报告bug是在执行的过程中同步进行的——即执行用例的过程中一旦发现bug我们需要立即把其报告到我们的bug管理系统r ...