css背景中花几个等分边框

图片说明
上图，背景中，画边框6个，左右两侧是页面十二分之一，加起来是六分之一，中间5个都是六分之一，高度是100%，宽度自适应，720px时候变成三等分，求解答，万分感谢

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
    $("div").css("height",window.innerHeight)
})
</script>

那个三等分是什么意思是 div 个数都变了吗

下面是手写的，用bootstrap可以实现，bootstrap就是分为12格实现流使布局的

 <style type="text/css">
*{
    margin: 0;
    padding: 0;
}
.col-lg-2{
    width: 16.2%;
}
.col-lg-1{
    width: 8.3%
}
.white{
    background-color: wheat;
}
.red{
    background-color: red;
}
div{
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 500px;
}
</style>
<body>
        <div class="col-lg-1 white">

        </div>
        <div class="col-lg-2 red">

        </div>
        <div class="col-lg-2 white">

        </div>
        <div class="col-lg-2 red">

        </div>
        <div class="col-lg-2 white">

        </div>
        <div class="col-lg-2 red">

        </div>
        <div class="col-lg-1 white">

        </div>
    </body>

想随屏幕大小变化的话@media screen ，就是设置两套css，会根据屏幕大小的变化，加载不同的属性

图片说明

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>index</title>
 <style type="text/css">
* {
            margin: 0;
            padding: 0;
            height:100%;
        }

.flex-container {
    display: -webkit-flex;
    display: flex;

}



.item1 {
    -webkit-flex:1;
    flex: 1;
    border-right:1px #FF0000 solid; }


.item2 {
    -webkit-flex: 2;
    flex: 2;
    border-right:1px #FF0000 solid; }
.item3 {
    -webkit-flex: 1;
    flex: 1;
    }
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">flex: 1</div>
<div class="flex-item item2">flex: 2</div>
<div class="flex-item item2">flex: 2</div>
<div class="flex-item item2">flex: 2</div>
<div class="flex-item item2">flex: 2</div>
<div class="flex-item item2">flex: 2</div>
<div class="flex-item item3">flex: 3</div>
</div>
</body>
 </html>