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 ...
随机推荐
- JavaScript嗅探执行神器-sniffer.js，你值得拥有！
一.热身--先看实战代码 a.js 文件 // 定义Wall及内部方法 ;(function(window, FUNC, undefined){ var name = 'wall'; Wall.say ...
- C语言总结
我们用了20天的时间左右的时间来学习简单的C语言,对于C语言,总体来说我是学的不是特别透彻,感觉自己什么都不懂一样.明天就要考试了,希望明天考个好成绩,为明年打下一个良好的基础. 这段时间我们学习了: ...
- Redis 学习之持久化机制、发布订阅、虚拟内存
一.持久化机制 Redis是一个支持持久化的内存数据库,redis会经常将内存中的数据同步到硬盘上来保证数据持久化,从而避免服务器宕机数据丢失问题,或者减少服务器内存消耗提高性能. 持久化方式: 1. ...
- 安装Sphere v2.7 遇到的问题
今天在安装Sphere v2.7 的时候,提示错误: /home/lgj/nist/lib/libsphereCombinedLibs.a(shorten.o): In function `short ...
- KMP算法的正确性证明及一个小优化
直接把作业帖上来是不是有点不太公道呀... 无所谓啦反正各位看着开心就行 KMP算法 对于模式串$P$,建立其前缀函数$ N$ ,其中$N [q] $ 表示在$P$中,以$q$位置为结束的可以匹配到前 ...
- 使用jQuery快速高效制作网页交互特效
第四章:JQuery选择器 1.Jquery选择器简介 (1) Jquery中的选择器完全继承了CSS的风格,利用Jquery选择器,可以非常便捷和快速的找出特定的Dom元素,然后为他们添加相应的行为 ...
- 不用搭环境的10分钟AngularJS指令简易入门01（含例子）
不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...
- MSCRM 通过Ajax调用WCF服务
Call WCF Service from Dynamics CRM using AJAX A couple of days back, I had one of my ex-colleagues c ...
- Visual Studio 2017正式版离线安装及介绍
Visual Studio 2017 RTM正式版离线安装及介绍. 首先至官网下载:https://www.visualstudio.com/zh-hans/downloads/ VS 2017 正式 ...
- Summary Ranges leetcode
Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...