用一个父元素包裹三个子元素，将父元素的white-space设置为nowrap;这样子元素就会排在父元素中而不会换行了，通过这种方式，我们也就可以在移动端使用包裹元素的margin值实现类似的单页应用了。但是使用display:inline-block;不可避免的会出现一些问题。
首先看下面的代码：
<!DOCTYPE html>
<html>
<head>
<title>inlineblock</title>
<style>
*{margin:0; padding:0;}
.wrap{
position: relative;
white-space: nowrap;
1000px;
background-color:#aaa;
}
.first{
display: inline-block;
200px;
height: 500px;
background-color: #bbb;
}
.second{
display: inline-block;
200px;
height: 300px;
background-color: #ccc;
}
.third{
display: inline-block;
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；再设置高度即可，这样，可以解决跳动的问题。