用一个父元素包裹三个子元素，将父元素的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. SourceInsight中 加namespace宏后,无法跳转问题解决

    Option->preferences->languages: C++ language->special, checked Ignore namespace declaration ...

  2. linux 常见命令--系统信息部分

    head -n 1 /etc/issue    #查看操作系统 cat /etc/redhat-release  #查看linux系统版本 cat /proc/meminfo |grep MemTot ...

  3. 设置ArcGIS地图文档的数据源为相对路径

    ArcGIS中默认情况下,地图文档的数据源路径为绝对路径.在这种情况下,如果移动/拷贝地图文档及其数据源后,再次打开地图文档时,就看不到具体图层数据了(图层列表中图层前有“!”图标,并且无法查看图层数 ...

  4. [Erlang06]在Erlang shell怎么在目录A下编译目录B下的文件，并把生成文件统一放置目录C？

    问题描述: 我们想快速测试一个小功能,第一个反应就是打开Erl shell 直接输入,但是当想测试一个复杂的函数时,一般会写成一个*.erl文件,然后在shell下: cd(FileDir). c(F ...

  5. 工作中的Buff加成-结构化思考力：自创独门武功 3-3-3原则

    3-3-3原则 3秒钟 *思考三秒钟 沟通前根据交谈内容思考3秒钟,思考下具体需要表达什么,思考的主要点为What.Why.How. *冷静三秒钟 在沟通过程中,若遇到气氛不和谐,比如生气.愤恨等时, ...

  6. Javascript中的闭包（转载）

    前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...

  7. 适用于Java的嵌入式脚本语言

    此文已由作者赵昕授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. fakescript 轻量级嵌入式脚本语言 https://github.com/esrrhs/fakescr ...

  8. [HNOI2010] 合唱队

    题目链接:https://www.luogu.org/problemnew/show/P3205 一个区间DP的题目. 设计状态为:\(dp1[i][j]\)表示当前区间为\([i,j]\),而且最后 ...

  9. Adorner 装饰器

    装饰器 Adorner 装饰器是WPF中较为常用的技术之一,也是不同于XAML的技术. 较为特殊. 特殊于装饰器全部由C#构成,不同于ControlTenmpate和Style的元素. 装饰器在某些方 ...

  10. 关于C# 向TIM或者QQ自动发送中文消息【微信也是可用的】 附测试GIF中微信可用的 全新修订

    在上一篇文章的代码 对于微信已失效 重新更新一边 效果图: 源代码 using System; using System.Runtime.InteropServices; using System.T ...