win8效果的横向布局
有一个月没写过博客了，自己的博客也没有看过，前段时间一直在忙着写代码，公司有一个制漆的产品，与传统纵向布局不一样，要求页面横向布局，类似win8的那种布局效果，最开始，我也没有什么头绪，然后硬着头皮做了，后来，遇到了很多麻烦，我网上查了一些资料，但都不太好，只好自己做了，在做的过程中，突然想到，flex布局，我就试了一下，成功了
<!doctype html>
<head>
<style type="text/css">
*{
box-sizing:border-box;
padding:0;margin:0;border:0
}
html,body{
height:100%;
display: box; /* OLD - Android 4.4- */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
}
.leftside,.rightside{
height:100%;
min-width:200px;
margin-right:10px;
}
.rightside{
margin-right:0px;
}
.leftcardswrap,.rightcardswrap{
/*Firefox*/
height:-moz-calc(100%);
/*chrome safari*/
height:-webkit-calc(100%);
/*Standard */
height:calc(100%);
width:100%;
background:#ccc;
overflow-x:hidden;
overflow-y:auto;
padding:5px;
}
.scroll{
height:100%;
}
.scroll-top,.scroll-bottom{
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
height:50%;
padding-bottom:5px;
}
.cards-wrap{
-webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: none; /* OLD - Firefox 19- */
-webkit-flex: none; /* Chrome */
-ms-flex: none; /* IE 10 */
flex: none;
position:relative;
float:left;
/*Firefox*/
height:-moz-calc(100%);
/*chrome safari*/
height:-webkit-calc(100%);
/*Standard */
height:calc(100%);
min-width:200px;
background:#ccc;
margin-right:10px;
display: inline-block;
*display: inline;
*zoom: 1;
padding:5px;
overflow-x:hidden;
overflow-y:auto;
}
.card{
min-height:200px;
width:100%;
background:green;
margin-bottom:5px;
}
</style>
</head>
<body>
<div class="leftside">
<div class="leftcardswrap">
<div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div>
</div>
</div>
<div class="scroll">
<div class="scroll-top">
<div class="cards-wrap"><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div></div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
</div>
<div class="scroll-bottom">
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
</div>
</div>
<div class="rightside">
<div class="rightcardswrap">
<div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div>
</div>
</div>
</body>
</html>
上面是我的代码
运行出来的效果如下：
flex布局轻松搞定了
<!doctype html>
<head>
<style type="text/css">
*{box-sizing:border-box;}
html{
height:100%;
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
body{
display:flex;
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.leftside,.rightside{height:100%;width:200px;margin-right:10px;}
.rightside{margin-right:0px;}
.leftcardswrap,.rightcardswrap{height:calc(100%);width:100%;background:#ccc;overflow-x:hidden;overflow-y:auto;padding:5px;}
.scroll{height:100%;}
.scroll-top,.scroll-bottom{
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
height:50%;
padding-bottom:5px;
}
.cards-wrap{
-webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: none; /* OLD - Firefox 19- */
-webkit-flex: none; /* Chrome */
-ms-flex: none; /* IE 10 */
flex: none;
position:relative;
float:left;
height:calc(100%);
width:200px;
background:#ccc;
margin-right:10px;
display: inline-block;
*display: inline;
*zoom: 1;
padding:5px;
overflow-x:hidden;
overflow-y:auto;
}
.card{
min-height:200px;
width:100%;
background:green;
margin-bottom:5px;
}
</style>
</head>
<body>
<div class="leftside">
<div class="leftcardswrap">
<div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div>
</div>
</div>
<div class="scroll">
<div class="scroll-top">
<div class="cards-wrap"><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div></div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
</div>
<div class="scroll-bottom">
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
<div class="cards-wrap">111111</div>
</div>
</div>
<div class="rightside">
<div class="rightcardswrap">
<div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div>
</div>
</div>
</body>
</html>
win8横向布局：
注意点：
1、flex的兼容性写法
2、inline-block的兼容性写法
3、html标签设置高度为100%时，body高度不能设置为100%，否则会出现滚动条
4、html与body高度相差10个像素的原因是因为设置了!doctype html,解决办法是html，body{margin:0px;padding:0px;}这样的话问题三就不会出现了。
5、如果body与html不设置100%的话，body里面会出现滚动条。
6、html，body{margin:0px;padding:0px;height:100%;display:flex}这个是解决横向布局的终极解决方法。
7、box-sizing要全局设置好，否则会出现各种计算问题。
8、原理上，flex里面的排列方式是一行显示，但如果要显示两行的话，给这两行加上父元素，display:block;就可以。
时隔一年，我再来做这个，越来越简单了，废话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
html,body{
height:100%;
padding:0px;
overflow:hidden;
width:100%;
}
.content{
width:100%;
height:100%;
overflow-x:auto;
overflow-y:hidden;
padding:0px;
background:#ccc;
float:left;
white-space:nowrap;
}
.item{
display:inline-block;
width:80px;
height:100%;
margin-right:4px;
}
.itemTop,.itemBottom{
height:50%;
width:100%;
box-sizing:border-box;
}
.itemTop{
background:green;
border-bottom:10px solid #ccc;
}
.itemBottom{
background:red;
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div> <div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div> <div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div> <div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom"></div>
</div>
</div>
</body>
</html>
win8效果的横向布局的更多相关文章
- CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- 仿360新闻的热搜图片，win8风格随机九宫格布局
360新闻地址:http://sh.qihoo.com/i/ 感觉这效果挺好的,随机九宫格,在不少地方可以用到,就研究了下他的源码,基本原理就是预先定义好几种布局模块,然后根据需要进行拼接,具体代码可 ...
- 【Android】13.0 UI开发（四）——列表控件RecyclerView的横向布局排列实现
1.0 新建项目,由于ListView的局限性,RecyclerView是一种很好取代ListView的控件,可以灵活实现多种布局. 2.0 新建项目RecyclerviewTest,目录如下: 3. ...
- Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- 关于H5填写信息类页面横向布局总结
接触h5已经有快一年了,因为一直偏向页面重构所以在页面布局方面也算是经历过风风雨雨.所以总结一下自己用过的方法来比较归纳 首先来说,H5的页面一般分为两种,一种是用来做市场营销的,主要特征是图多,页面 ...
- 在LinearLayout中实现列表,列表采用LinearLayout横向布局-android学习
不多讲直接上代码 1.Activity 对应的布局文件如下: <?xml version="1.0" encoding="utf-8"?> < ...
- css 控制横向布局，超出隐藏，滚动
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta cha ...
- web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- Bootstrap3基础 form-horizontal 表单元素横向布局 简单示例
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
随机推荐
- Python学习--20 Web开发
HTTP格式 HTTP协议是基于TCP和IP协议的.HTTP协议是一种文本协议. 每个HTTP请求和响应都遵循相同的格式,一个HTTP包含Header和Body两部分,其中Body是可选的. HTTP ...
- java 文件操作 写入和读取（小结一）
参考了这篇博客并优化,谢谢:http://blog.sina.com.cn/s/blog_99201d890101b4le.html 功能: 实现通过两个类完成先写入文件,再读取数据计算显示 pac ...
- 2.SQL语言进阶
0.实验数据 表1.course表 表2.student表 表3.sc表 1.SQL连接 内连接 select * from student,sc where student.sno=sc.sno;/ ...
- [MongoDB] - mongod.exe参数详解
mongod.exe是启动mongodb的命令,我们可以通过mongod --help来查看帮助文档.下面是各个参数的对应中文解释.<基于Mongo3.0.5> 通用参数选项 -h/--h ...
- 读书笔记 effective c++ Item 21 当你必须返回一个对象的时候，不要尝试返回引用
1. 问题的提出:要求函数返回对象时,可以返回引用么? 一旦程序员理解了按值传递有可能存在效率问题之后(Item 20),许多人都成了十字军战士,决心清除所有隐藏的按值传递所引起的开销.对纯净的按引用 ...
- PHP结合memcacheq消息队列解决并发问题
在处理业务逻辑时有可能遇到高并发问题,例如商城秒杀.微博评论等.如果不做任何措施可能在高瞬间造成服务器瘫痪,如何解决这个问题呢?队列是个不错的选择.队列(Queue)又称先进先出(First In F ...
- 老司机教你如何正确地在大陆安装 BlackArch
BlackArch 官方有一个比较完整的安装指南文档,其地址为 https://blackarch.org/blackarch-install.html 正如其第一行所述的那样 This tutori ...
- gulp快速入门&初体验
前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...
- smarty模板调数据库并做添加删除修改和分页
smarty模板只要就是实现分离效果所以每个功能都需要两个页面一个是HTML 和 PHP 两部分组成 使用smarty模板要在main文件夹下面创建login.php文本,要用smarty模板首先 ...
- 数字化工厂解决方案——OA办公自动化与ERP
移动办公APP/即时通讯 通过集成手机应用,将移动办公引入到企业信息化管理中,能随时随地的完成审批.查询.警报.知会.公告发布.KPI统计和信息推送.系统已经支持苹果系统.安卓系统和微软WP8系统.企 ...