win8效果的横向布局

Posted 2020-08-21 windSeek

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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><以上是关于win8效果的横向布局的主要内容，如果未能解决你的问题，请参考以下文章 
 将片段用于横向视图和 ViewPager
 处理屏幕旋转上的片段重复（带有示例代码）
 FragmentStatePageAdapter 缓存，重新创建活动后如何引用旧片段？ （对于前 - 横向模式）
 在不存在的片段上调用片段生命周期和 onCreate 的问题
 为不同方向使用不同布局时，在方向更改时保存片段状态
 没有视图的片段在配置更改时崩溃