先上代码：

<!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敏捷开发框架 力软敏捷开发(learun) 让开发变的更简单

    版本:6.1.6.2 体验地址:www.fishcmonkey.com 联系QQ:6539471

  2. C#.NET和C++结构体Socket通信与数据转换

    最近在用C#做一个项目的时候,Socket发送消息的时候遇到了服务端需要接收C++结构体的二进制数据流,这个时候就需要用C#仿照C++的结 构体做出一个结构来,然后将其转换成二进制流进行发送,之后将响 ...

  3. Mysql与SQLserver区别

    1.为空 SQLserver用isnull Myserver用ifnull 2.全球唯一标识符 SQLserver用newid() Myserver用uuid() 3.以分隔符拼接字符串 concat ...

  4. 条件分支SQL语句<一> Case When

    SELECT END ) AS MoneyIn, END ) AS MoneyOut, END ) AS BetMoney, END ) AS PctMoney, END ) AS WinMoney, ...

  5. Java爬虫框架Jsoup学习记录

    Jsoup的作用 当你想获得某网页的内容,可以使用此框架做个爬虫程序,爬某图片网站的图片(先获得图片地址,之后再借助其他工具下载图片)或者是小说网站的小说内容 我使用Jsoup写出的一款小说下载器,小 ...

  6. Java高并发 -- 并发扩展

    Java高并发 -- 并发扩展 主要是学习慕课网实战视频<Java并发编程入门与高并发面试>的笔记 死锁 死锁是指两个或两个以上的事务在执行过程中,因争夺锁资源而造成的一种互相等待的现象, ...

  7. Redirect all output to file

    That part is written to stderr, use 2> to redirect it. For example: foo > stdout.txt 2> std ...

  8. Java8 Optional类

    概述 到目前为止,著名的NullPointerException是导致Java应用程序失败的最常见原因.过去,为了解决空指针异常,Google公司著名的Guava项目引入了Optional类,Guav ...

  9. 如何将字符串格式的对象转换成真正的js对象？

    1.如何将字符串格式的对象转换成真正的js对象? <script>//eval 的作用eval('var a = 100');console.log(a);</script> ...

  10. 掌握PHP垃圾回收机制

    php的垃圾回收机制可以简单总结为 引用计数 写时复制 COW机制, 本文主要和大家分享掌握php垃圾回收机制的知识,希望能帮助到大家. 引用计数基本知识 官网的解答如下 每个php变量存在一个叫”z ...