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将对象转化为 ...
随机推荐
- ASP.NET MVC 缓存页面（方法）
- C++静态成员和非静态成员的区别和使用
C++静态成员和非静态成员的区别和使用 对象与对象之间的成员变量是相互独立的.要想共用数据,则需要使用静态成员和静态方法. 只要在类中声明静态成员变量,即使不定义对象,也可以为静态成员变量分配空间,进 ...
- RabbitMQ与.net core(三) fanout类型Exchange 与 消息的过期时间 与 队列的存活时间
上一篇我们讲了关于direct类型的Exchange,这一片我们来了解一下fanout类型的Exchange. 1.Exchange的fanout类型 fanout类型的Exchange的特点是会把消 ...
- on where having总结
1. ON 和WHERE 所有的查询都回产生一个中间临时报表,查询结果就是从返回临时报表中得到.ON和WHERE后面所跟限制条件的区别,主要与限制条件起作用的时机有关, ON根据限制条件对数据库记录进 ...
- django fileup-load
文件上传 使用form表单类的上传 forms.py from django import forms class UploadFileForm(forms.Form): title = forms. ...
- 图形学思考 - 聊聊透视图投射矩阵perspective projective matrix
from:版权声明:本文作者靖心,靖空间地址:http://blog.csdn.net/kenden23/,未经本作者允许不得转载. 什么是透视图投射矩阵perspective projective ...
- 一，Smarty模板技术/引擎——简介
Smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使PHP程序员与美工分离,使用的程序员改变程序的逻辑内容不会影响到美工的页面设计,美工重新修改 ...
- php对象在内存中存在形式
1,php中基本数据类型存在于栈区,对象这种数据类型存在于堆区: 比如如下代码,两个指针指向同一个对象,其输出相同 <?php /** * Created by PhpStorm. * User ...
- java内存模型（jMM）(一)
在说java的内存模型之前先简单的了解计算机的主存和缓存的相关概念. 多任务和高并发是衡量一台计算机处理器的重要指标.一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions P ...
- 从零开始用 Flask 搭建一个网站（四）
前言 从零开始用 Flask 搭建一个网站(三) 介绍了网页前端与后端.前端与前端之间数据的交流.本节主要介绍一下如何应用 Flask-OAuthlib, 使用 Flask-OAuthlib 就可以轻 ...