ms-grid layout 

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="js/jq.js"></script>
    <script src="js/ko.js"></script>
    <script src="resources/lib/core.js"></script>
    <script src="resources/lib/nav.js"></script>
    <script src="js/index.js"></script>

    <style>
        .container {
            width: 620px;
            height: 415px;;
            display: -ms-grid;
            -ms-grid-columns: 5px(200px 5px ) [ 3 ];
            -ms-grid-rows: 5px(200px 5px ) [ 2 ];
            border: 1px solid red;
        }

        .item {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;;
            border: 1px solid deepskyblue;
        }

        .item:nth-child(odd){
            background: cornflowerblue;
            color:white;
        }
        .item:nth-child(even){
            background: darkslategray;
            color:white;
        }

        .container .item:first-child {
            -ms-grid-column: 2;
            -ms-grid-row: 2;
        }

        .container .item:nth-child(2) {
            -ms-grid-column: 4;
            -ms-grid-row: 2;
        }

        .container .item:nth-child(3) {
            -ms-grid-column: 6;
            -ms-grid-row: 2;
        }

        .container .item:nth-child(4) {
            -ms-grid-column: 2;
            -ms-grid-row: 4;

        }

        .container .item:nth-child(5) {
            -ms-grid-column: 4;
            -ms-grid-row: 4;
        }

        .container .item:nth-child(6) {
            -ms-grid-column: 6;
            -ms-grid-row: 4;
        }

        .container .item:nth-child(7) {
            -ms-grid-column: 2;
            -ms-grid-row: 6;
        }
    </style>
</head>
<body>


<div class='container' data-bind='foreach:people'>
    <div class='item' data-bind='text:item'>

    </div>

</div>

</body>
</html>

 

posted @ 2013-07-19 15:58  高捍得  阅读(376)  评论(0)  编辑  收藏  举报