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 ...
随机推荐
- Android jni 编程1（对基本类型字符串的操作）
最近一直在学安卓的jni,主要参考的是黑马程序员的视频教程,讲的确实不错. 那就自己总结一下吧,算是对学习的复习. 这篇博客也主要参考了这位博主:http://www.cnblogs.com/acti ...
- 【前端】:JavaScript
前言: 开始学JavaScript,Dom,jQuery了,知识好杂,本身记忆力就不行的~~这篇博客简单介绍下JavaScript. 下篇博客写关于Dom的. JavaScript是一门编程语言(之前 ...
- HashSet、LinkedHashSet、TreeSet使用区别
HashSet:哈希表是通过使用称为散列法的机制来存储信息的,元素并没有以某种特定顺序来存放: LinkedHashSet:以元素插入的顺序来维护集合的链接表,允许以插入的顺序在集合中迭代: Tree ...
- jQuery_第二章_定时器
- Markdown 标记语言简介
简介 做为一种标记语言,广泛应用在写作领域,markdown语法编写的文本,经过特殊的软件进行展示: 目的:相对html,markdown提高文本的可读可写性 兼容:兼容html 自动转换特殊字符:& ...
- 多源最短路径---Floyd-Warshall算法
摘自啊哈算法-知识分享,代码自己有改动,使得输出更直观. 小哼准备去一些城市旅游.有些城市之间有公路,有些城市之间没有,如下图.为了节省经费以及方便计划旅程,小哼希望出发之前知道任意两个城市之间的最短 ...
- XCel 项目总结 - Electron 与 Vue 的性能优化
XCEL 是由凹凸实验室推出的一个 Excel 数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选. XCEL 基于 Electron 和 Vue 2.0 进行开发,充分利用 E ...
- 关于Android App开发技术分类的一个小总结
前言 本文从热更新.异步并发.性能优化.网络请求等多个方面对Android App开发的技术进行了一个分类总结.欢迎大家沟通交流. 热更新 [原]热更新开源项目Tinker源码解析之Dex热更新 [ ...
- ArrayList源码剖析
ArrayList简介 ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存. ArrayList不是线程安全的,只能用在单线程环境下,多线 ...
- Codevs2776 寻找代表元
2776 寻找代表元 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用1到n编号 ...