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 ...
随机推荐
- Revit二次开发: 文件损坏
哪些因素可能会导致损坏? 损坏的原因也各不相同,包括但不限于 无法读取/写入存储介质 程序发生崩溃(特别是在数据写入 RVT 模型时) 附加模块以通过正常 UI 无法或意外的方式修改图元 未经测试的多 ...
- “每日一道面试题”.Net中所有类的基类是以及包含的方法
闲来无事,每日一贴.水平有限,大牛勿喷. .Net中所有内建类型的基类是System.Object毋庸置疑 Puclic Class A{}和 Public Class A:System.Object ...
- ASP.NET Core中的Startup类
ASP.NET Core程序要求有一个启动类.按照惯例,启动类的名字是 "Startup" .Startup类负责配置请求管道,处理应用程序的所有请求.你可以指定在Main方法中使 ...
- [Linux] Linux的环境变量
环境变量可以被系统,用户,shell以及其他程序来设定 登录系统后,系统读取/etc/profile 文件,设置环境变量,如果没有就跳过 检查主目录(/root)的.profile文件,推荐去这个文件 ...
- git 创建本地分支与远程分支
早上抽空整理了下git常用操作,偶尔看看加深下印象吧: 如果github上已经有master分支 和dev分支 在本地 git checkout -b dev 新建并切换到本地dev分支 git pu ...
- git error: RPC failed; result=56, HTTP code = 200
突然发现git pull 后出现几次都无果,百度后, 发现是curl的postBuffer 默认值较小的原因,配置下这个值,就不会出现该错误了.解决如下: git config --global ht ...
- springMVC_08文件上传
一.步骤总结 导入jar包 配置web.xml 在src目录下创建配置文件mvc.xml 创建前段页面fileupload.jsp 创建controller类HelloController 配置mvc ...
- Hibernate入门(十二)离线条件检索
Hibernate——离线条件检索DetachedCriteria DetachedCriteria翻译为离线条件查询,因为它是可以脱离Session来使用的一种条件查询对象,我们都知道Criteri ...
- 捕获未处理的Promise错误
译者按: 通过监听unhandledrejection事件,可以捕获未处理的Promise错误. 原文: Tracking unhandled rejected Promises 译者: Fundeb ...
- 使用JavaScript获取URL中的参数(两种方法)
本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = ...