有一个月没写过博客了，自己的博客也没有看过，前段时间一直在忙着写代码，公司有一个制漆的产品，与传统纵向布局不一样，要求页面横向布局，类似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>

最新文章

  1. iOS sqlite数据库图像化查看
  2. The Practice of .NET Cross-Platforms
  3. 【.NET】Nuget包，把自己的dll放在云端
  4. JavaScript - 初识
  5. UIImage加载本地图片的两种方式
  6. springmvc 用注解方式添加事务不生效解决方法
  7. Nhibernate对应关系参数介绍
  8. 用pip爽久了，竟然完了easy install安装过程了
  9. 初次使用JFinal
  10. Android使用SeekBar时动态显示进度且随SeekBar一起移动
  11. web Listener
  12. IT技术网站汇总
  13. 投票系统 &amp; js脚本简单刷票
  14. linux字符集介绍及解决中文乱码实战
  15. Spark-1（概念）
  16. 适配iOS11
  17. 搭建Flutter-iOS开发环境
  18. Redis——redis使用redis-dump，redis-load导出导入数据——【三】
  19. CentOS6.5 安装+ Tengine + PHP + MySQL
  20. pip使用代理下载

热门文章

  1. Unity编程标准导引-3.2 MonoBehavior 组件父类重构
  2. asp.net MVC4总结
  3. asp.net core mvc实现伪静态功能
  4. angular ng-repeat数组中的数组
  5. [solr] - solr5.2.1环境搭建 - 使用tomcat做为容器
  6. H5中背景音乐无法自动播放问题
  7. win8 wifi开关显示关闭，且设置里面wifi开关显示灰色的解决办法
  8. BZOJ 3402: [Usaco2009 Open]Hide and Seek 捉迷藏(最短路)
  9. yum的用法
  10. 用Javascript大批量收集网站数据