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 ...
随机推荐
- XmlHepler(拿去就能用)
[系列目录](./XmlCatalog.html) 前言 本篇是这个系列的最后一篇.也是本人第一次写系列文章,虽然系列中大部分内容都是参考网络,但是自己都有敲代码验证.自己再编写过程中也学习到了很多知 ...
- 集成支付宝-iOS
前言 坑坑坑,把踩过的坑都要记下来!! 正文 1.支付宝的demo和文档都好难找啊@_@,像我这个记忆不太好的,第二次都找不到!!为了方便大家,还是直接给大家网址吧,(不要太感谢我喔~)https:/ ...
- 一键打包并发布到Nuget平台
目标是只要执行一个命令就自动发布新版本到nuget平台 第一步在nuget官网注册一个账号 会有一个APIKEY 如下图 在工程里面添加一个Gruntfile.js 然后copy以下代码 在vs里 ...
- php处理登录、添加数据、删除数据和修改数据
php 处理登录 :需要先建一个登录的页面,用form表单就可以很轻松的完成,(这里的示例是我根据数据库现成的表做的 是一个teacher表格 根据老师的工号和姓名登录的) <form acti ...
- Pro Git CN Plus
Git — The stupid content tracker, 傻瓜内容跟踪器.Linus 是这样给我们介绍 Git 的. Git 是用于 Linux 内核开发的版本控制工具.与常用的版本控制工具 ...
- 每天一个Linux命令（11）--nl命令
nl命令在Linux系统中用来计算文件中行号.nl可以将输出的文件内容自动的加上行号,其默认的结果与cat -n 有点不太一样,nl可以将行号做比较多的显示设计,包括位数与是否自动不起0等等的功能. ...
- Ghostscript.Net Pdf 转 Image
需求: 项目中需要实现PPT转Image的功能,之前项目中用的是使用Office COM组件实现的功能,通过.NET与Office COM组件的互操作(Interop)来操作Office文档 但是在生 ...
- 【Unity优化】我所理解的IL指令
版权声明:本文为博主原创文章,欢迎转载.请保留博主链接:http://blog.csdn.net/andrewfan 指令格式 英文单词全写 指令解释 nop no operation perform ...
- Server push（服务器推送技术）
一.服务器推送技术Server Push详解: 推送技术Server Push的基础思想是将浏览器主动查询信息改为服务器主动发送信息.服务器发送一批数据,浏览器显示这些数据,同时保证与服 ...
- Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...