display:inline-block会出现的问题
用一个父元素包裹三个子元素，将父元素的white-space设置为nowrap;这样子元素就会排在父元素中而不会换行了，通过这种方式，我们也就可以在移动端使用包裹元素的margin值实现类似的单页应用了。但是使用display:inline-block;不可避免的会出现一些问题。
首先看下面的代码：
<!DOCTYPE html>
<html>
<head>
<title>inlineblock</title>
<style>
*{margin:; padding:;}
.wrap{
position: relative;
white-space: nowrap;
width: 1000px;
background-color:#aaa;
}
.first{
display: inline-block;
width: 200px;
height: 500px;
background-color: #bbb;
}
.second{
display: inline-block;
width: 200px;
height: 300px;
background-color: #ccc;
}
.third{
display: inline-block;
width: 200px;
height: 600px;
background-color: #ddd;
}
</style>
</head>
<body>
<div class="wrap">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
最终效果如下所示：
可以看到问题有二。
注意点1： 在子元素之间存在间隙
这是inline-block以及inline元素共有的问题。
解决方法：给父元素设置font-size:0;
注意：设置了font-size:0;之后，子元素将会继承元素的字体大小所以要给字体设置大小
注意点2： 三个子元素默认是底对齐，且父元素的高度由height最高的元素撑起来
解决方法：给子元素添加position:relative;属性，通过top和bottom来控制其所处高度位置。
注意点3： 如果将高度最高的元素通过position:relative；来移动，父元素的高度和位置并不会发生改变。
首先，我们给第三个子元素添加postion:relative;然后给其添加top:100px;最终效果如下所示（注意：这里的父元素添加了font-size:0，所以子元素之间的间隙不存在）：
注意点4： 给父元素设置height是没有用处的。
我们为了让最高的元素消失时，其他两个子元素不变，可以采用给父元素设置padding的方法。
注意点5：我们可以给子元素设置position:absolute；再设置高度即可，这样，可以解决跳动的问题。
display:inline-block会出现的问题的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
随机推荐
- memcached整理の分布式集群算法
memcached如何实现分布式? memcached是一个“分布式内存对象缓存系统”,然而memcached并不像mongodb那样,允许配置多个节点,且节点之间“自动分配数据”,就是说memcac ...
- Java如何实现按指定行读取文件
最近在开发实战中,遇到了一个这样的技术情景: 把log4j生成的日志文件定时刷进MySQL数据库,比如三个小时刷一次,那么每次刷数据的时候,如何控制文件读取是从上一次文件读取结束的地方开始继续读取的? ...
- GitHub上创建组织
4.3. 组织和团队 GitHub 在早期没有专门为组织提供账号,很多企业用户或大型开源组织只好使用普通用户账号作为组织的共享账号来使用.后来,GitHub推出了组织这一新的账号管理模式,满足大型开发 ...
- MongoDB高级知识-易扩展
MongoDB高级知识-易扩展 应用程序数据集的大小正在以不可思议的速度增长.随着可用宽带的增长和存储器价格的下跌,即使是一个小规模的应用程序,需要存储的数据也可能大的惊人,甚至超出了很多数据库的处理 ...
- 《Think in Java》20 21（并发）
chapter 20 注解 三种标准注解和四种元注解: 编写注解处理器 chapter 21 并发 基本的线程机制 定义任务 package cn.test; public class LiftOff ...
- 为什么程序员都不喜欢使用switch而使用if来做条件跳转
请用5秒钟的时间查看下面的代码是否存在bug. OK,熟练的程序猿应该已经发现Bug所在了,在第8行和第10行下面我没有添加关键字break; 这就导致这段代码的行为逻辑与我的设计初衷不符了. 缺 ...
- python基础,变量,if语句
一.python初识 python是一门 解释型弱类型编程语言. 特点: 简单.明确.优雅 二.python的解释器 CPython. 官方提供的. 内部使用c语言来实现 PyPy. 一次性把我们的 ...
- 模块化之seaJs学习和使用
使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写……也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出.[抱拳] 时间有限,我这里不过多介绍前端模块化,有兴趣可以 ...
- web 应用的部署
一.项目管理 : zentao(国产开源),其他 project.redmine.trac 二.自动部署: jenkins:自动化配置 docker:容器,类似虚拟机,不过只是本机系统的内核的一个虚拟 ...
- 2016级算法第三次上机-A.Bamboo的小吃街
A Bamboo的小吃街 分析 经典的两条流水线问题,题目描述基本类似于课件中的流水线调度,符合动态规划最优子结构性质 关键的动态规划式子为: dp[0][j] = min(dp[0][j - 1], ...