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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

教你如何用 RecyclerView 做一个好用的轮播图

引子 一般情况下,我们手机 App 上轮播图一般都是几张图来回循环,最多也就10几张,一般都是在10张以内的轮播。所以我们一般可能都是自己写,还有可能用到了别人...

1965
来自专栏kwcode

javascript 模拟按键点击提交

上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...

33310
来自专栏娱乐心理测试

Ios常用第三方动画框架(三)

623
来自专栏一“技”之长

Cocos2d-x-v3场景切换 原

        cocos2d中场景的切换采用的是包装的思想,通过创建一个专场效果类,将需要专场的场景进行包装。代码示例如下:

311
来自专栏GIS讲堂

扩展graphiclayer实现多城市天气情况的展示

在上一节,实现了点击展示城市天气的效果,在本节,讲述通过扩展graphiclayer实现同时显示多个城市天气的展示。

572
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(四)实现JD分类页面

如下面的结构:大盒子1和大盒子2分为上下结构,小盒子3和小盒子4在大盒子2的内部,分为左右结构。

673
来自专栏C/C++基础

C#子窗体精确定位到父窗体的某个位…

弹出的子窗体精确定位在父窗体的某个位置,需要有目标坐标(这里将子窗体的位置设置为父窗体中一个panel的位置,需要将panel的坐标转换成屏幕坐标)

834
来自专栏林德熙的博客

win10 uwp 进度条 WaveProgressControl

昨天看到了有个大神做出好看的进度条样式,于是我就去抄袭他的代码,但是发现看不懂,于是本文主要翻译就是大神说这个控件如何做。

320
来自专栏24K纯开源

Qt Style Sheet实践(一):按钮及关联菜单

导读      正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。...

2725
来自专栏Flutter入门

Flutter开发实战分析-animation_demo瞎复写总结

以下代码基本参考于 flutter_gallery中的animation_demo示例。(可以结合本文看源码)

1633

扫码关注云+社区