用一个父元素包裹三个子元素,将父元素的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会出现的问题的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议147:重构多个相关属性为一个类

    建议147:重构多个相关属性为一个类 若存在多个相关属性,就应该考虑是否将其重构为一个类.查看如下类: class Person { public string Address { get; set; ...

  2. CodeForces - 631C ——(思维题)

    Each month Blake gets the report containing main economic indicators of the company "Blake Tech ...

  3. Redis!

    在安装redis完成时,使用windows管理redis工具时(例如RedisDesktopManager)时出现连接不上的问题时 ping一下你的ip 和 talnet ip  看看通不通. 如果不 ...

  4. ubuntu里面如何以root身份使用图形界面管理文件?

    nautilus 是gnome的文件管理器,但是如果不是root账号下,权限受限,我们可以通过以下方式以root权限使用! 一,快捷键“Ctrl+Alt+t”,调出shell. 二,在shell中输入 ...

  5. 带你玩转Visual Studio——带你高效开发

    VassistX的简单介绍与下载安装 简单介绍 VassistX的全称是Visual Assist X,是whole tomato开发的一个非常好用的插件,可用于VC6.0及Visual Studio ...

  6. 关于jxl的getCellFormat()方法获取表格样式----中文货币乱码

    File templateFile = getTempalte(client.getSc_shortName());//这里读取模板文件 WorkbookSettings set1 = new Wor ...

  7. python3入门之赋值语句介绍

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 本节主要介绍赋值语句,以及几种特殊的赋值.下面附有之前的文章: python3入门之print,import,input介绍 python入门之字 ...

  8. Web App三年将取代原生App?

    从技术角度讲,html5现在是可以获取很多用户的资源,上传提交服务器,与用户进行交互.但是你可以观察一下PC或Mac,web网页发展了这么长时间了,取代了客户端了吗? 对于现在而言,html5虽已可以 ...

  9. Flink学习笔记:Flink Runtime

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  10. 队列优化dijsktra(SPFA)的玄学优化

    转载:大佬博客 最近想到了许多优化spfa的方法,这里想写个日报与大家探讨下 前置知识:spfa(不带任何优化) 由于使用较多 STLSTL ,本文中所有代码的评测均开启 O_2O2​ 优化 对一些数 ...