基于上篇介绍的flipsnap框架，当滑动页面数为基数时页面该怎么布局呢？假如滑动页面数为3个，布局设计如下图所示1、2、3三个页面，向左拖动，页面2、页面3出现。
此时页面可分三种设计方法：
方法一：浮动方法。如果子元素为奇数，则子元素的宽度不精确，且子元素不能设置border，如果设置border，宽度就更不精确了。
方法二：弹性布局方法。此方法也是是不错的选择。但经测试，如果页面中弹性布局运用的很多，在UC等浏览器上，非常卡。说明弹性布局非常耗性能。
方法三：定位方法。此方法可解决方法一、二的缺点。注意：inner部分需设置高度，不然子元素会被隐藏，因为outer设置了overflow：hidden。
因此，此时采用方法三进行布局。代码如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>滑动页面数为3个时</title> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> /*重置{*/ body,div{ padding:0;margin:0;} /*}重置*/ .html.body{width:100%;height:100%;} .outer{width:100%;height:100%;overflow:hidden;margin-top: 40px;} /*超出窗口部分隐藏*/ .inner > div:nth-child(1){background:#ff0;height:200px;} .inner > div:nth-child(2){background:#0ff;height:200px;} .inner > div:nth-child(3){background:#0f0;height:200px;} /*方法一：浮动方法。如果子元素为奇数，则子元素的宽度不精确，且子元素不能设置border，如果设置border，宽度就更不精确了。*/ /*.inner{width:300%;} .inner > div{float:left;width:33.33%;}*/ /*方法二：弹性布局方法。此方法也是是不错的选择。但经测试，如果页面中弹性布局运用的很多，在UC等浏览器上，非常卡。说明弹性布局非常耗性能。*/ /*.inner{display:-webkit-box;-webkit-box-orient:horizontal;} .inner{width:300%;} .inner > div{-webkit-box-flex: 1;}*/ /*方法三：定位方法。此方法可解决方法一、二的缺点。注意：inner部分需设置高度，不然子元素会被隐藏，因为outer设置了overflow：hidden；*/ .inner{width:100%;height:200px;position:relative;text-align: center;line-height: 200px;font-size: 80px;} .inner > div:nth-child(1){position:absolute;left:0;right:0;} .inner > div:nth-child(2){position:absolute;left:100%;right:-100%;} .inner > div:nth-child(3){position:absolute;left:200%;right:-200%;}
</style> </head>
<body> <div class="outer"> <div class="inner"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <script src="flipsnap.js"></script> <script type="text/javascript"> var flipsnap=Flipsnap('.inner') ; /*当横竖屏切换时，宽高度自适应屏幕*/ window.addEventListener("resize",function () { var fliwidth=document.querySelector('body').offsetWidth; flipsnap.distance=fliwidth; flipsnap.refresh(); },false); </script> </body> </html>
本文转自挨踢前端博客园博客，原文链接http://www.cnblogs.com/duanhuajian/archive/2012/10/31/2748896.html如需转载请自行联系原作者
@挨踢前端
