用一个父元素包裹三个子元素，将父元素的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个建议——建议151：使用事件访问器替换公开的事件成员变量

    建议151:使用事件访问器替换公开的事件成员变量 事件访问器包含两部分内容:添加访问器和删除访问器.如果涉及公开的事件字段,应该始终使用事件访问器.代码如下所示: class SampleClass ...

  2. ArcGIS Server

    在ubuntu下安装 10.2 首先修改 /etc/security/limits.conf 添加 kun soft nofile 65535 kun hard nofile 65535 kun so ...

  3. scala文件流操作，生成sparkpv，uv作业文件

    package com.bjsxt.scalaspark.core.examples.pvAnduv import java.io.Fileimport java.text.SimpleDateFor ...

  4. Python 数据分析—第十章 日期处理

    日期时间数据类型及工具 from datetime import datetime now = datetime.now() print(now.year,now.month,now.day) #以毫 ...

  5. CentOS安装gotop

    1.安装go语言环境 yum install golang 2.安装gotop程序 git clone --depth 1 https://github.com/cjbassi/gotop /tmp/ ...

  6. 面试题：给定一个函数rand()能产生1到m之间的等概率随机数，产生1到n之间等概率的随机数？

    虽然TX的面试已经过去好几天了,然而惨痛的过程还历历在目.人生中第一次正式job面试就这么挂掉了.在于面试官的交流过程中,被问及了几个算法设计题,在今后几篇博文中,我一一总结与诸君分享. 1. 给定一 ...

  7. [linux] ubuntu 切换默认的/bin/sh

    [linux] ubuntu 切换默认的/bin/sh 背景 ubuntu 默认的sh, 也就是/bin/sh默认被切换成了dash,dash体积相对于bash更小,并且性能相对于bash更好, 但是 ...

  8. Replication--无法将事务提升为分布式事务，因为在事务中有活动的保存点

    场景描述在SQL SERVER 2012上创建事务发布,发布库已搭建为可AWAYSON,分发服务器和发布服务器分离,创建发布时提示“无法将事务提升为分布式事务,因为在事务中有活动的保存点” 解决方法E ...

  9. pycharm中使用git

    注册GitHub https://www.jb51.net/article/135606.htm pycharm中配置git https://www.cnblogs.com/feixuelove100 ...

  10. adb client, adb server, adbd原理浅析（附带我的操作过程）

    adb是什么? adb就是Android调试桥,很形象啊. 先来看adb原理的逻辑图: 再来进行实际操作:我的pc的ip是192.168.1.102, 我的android手机的ip为192.168.1 ...