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 ...
随机推荐
- Centos 7安装oracle 11g R2问题及解决方法汇总
自己新博客的链接:http://www.pythonsite.com/2017/02/14/centos-7%E5%AE%89%E8%A3%85oracle-11g-r2%E9%97%AE%E9%A2 ...
- runtime ---- iOS
1.runtime是什么?runtime是一套底层的C语言的API(包括C语言数据类型,C语言函数) 实际上平时我们写的OC代码底层都是基于runtime,实际上也就是最后都转成了runtime代码 ...
- Qt之hello world
本人使用的是Qt5.7版本的,请读者自主下载安装. 今天首先来进行Qt入门的第一个程序,也是很经典的一个例子.这是在很多的变成语言中都会用到的例子,就是输出helloworld这个信息.Qt中使用的变 ...
- V3学院XILINX FPGA寒假班培训感受 江苏大学 电子信息科学与技术 邓普建
事先申明一点,我是大一的学生,因此会站在一个新生的角度叙述. 刚开始接触V3学院是在江苏大学与V3学院合办的FPGA/SOC培训中,那是对全校开放的免费培训,历时三个周末.我那时有幸从头听到了尾,觉得 ...
- lambda表达式查询经验：IN 和groupby的使用
lambda In的用法: lambda表达式查询没有IN这个方法,可以变通一下,in查询的数组是否包含在映射对象里面的集合里: 如下代码: var departmentIDs = input.Dep ...
- GridControl基础设置（一）
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...
- 学习笔记——Java核心技术之接口、继承与多态练习题
1.创建一个抽象类,验证它是否可以实例化对象. package com.lzw; public abstract class UseCase3 { abstract void doit(); publ ...
- 从0移植uboot (二) _uboot启动流程分析
经过了上一篇的配置,我们已经执行make就可以编译出一个uboot.bin,但这还不够,首先,此时的uboot并不符合三星芯片对bootloader的格式要求,同时,此时的uboot.bin也没有结合 ...
- input 即时搜索 监听输入值的变化
在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理 ...
- String字符串截取跟替换经典案例
分享下今天的一个面试题吧!不算有难度,但是没做出来 题目:将String str="姓名:武亚伟,年龄:27,地址:西安市": 输出结果为:姓名=武亚伟 年龄=27 地址=西安市 ...