zoukankan html css js c++ java
12栅格化布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .container{
         900px;
        height: 300px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .container>.row{
         100%;
        height:100%;
        float: left;
        overflow: hidden;
    }


    @media screen and (min- 600px){
        .container{
             600px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        }
        .container>.row>.col-l-1{
             8.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-2{
             16.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-3{
             25%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-4{
             33.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-5{
             41.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-6{
             50%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-7{
             58.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-8{
             66.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-9{
             75%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-10{
             83.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-11{
             91.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-12{
             100%;
            height: 100%;
            float: left;
        }
    }


    @media screen and (min- 900px){
        .container{
             900px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        }
        .container>.row>.col-s-1{
             8.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-2{
             16.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-3{
             25%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-4{
             33.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-5{
             41.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-6{
             50%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-7{
             58.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-8{
             66.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-9{
             75%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-10{
             83.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-11{
             91.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-12{
             100%;
            height: 100%;
            float: left;
        }
    }


    @media screen and (min- 1200px){
        .container{
             1200px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        }
        .container>.row>.col-m-1{
             8.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-2{
             16.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-3{
             25%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-4{
             33.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-5{
             41.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-6{
             50%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-7{
             58.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-8{
             66.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-9{
             75%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-10{
             83.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-11{
             91.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-12{
             100%;
            height: 100%;
            float: left;
        }
    }


    div>[class*=col]{
        border:1px solid red;
        box-sizing: border-box;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-m-3 col-s-4 col-l-6"></div>
        <div class="col-m-3 col-s-4 col-l-6"></div>
        <div class="col-m-3 col-s-4"></div>
        <div class="col-m-3"></div>
    </div>
</div>
</body>
</html>
查看全文
相关阅读:
PHP获取某年第几周的开始日期和结束日期
 Java多线程（一）
Java多线程学习
 使用反射实现 webdriver page 类
 PageObjects 设计模式
 Selenium WebDriver 工作原理
 Selenium2.0 Webdriver 随笔
 Selenium-Grid2 配置RemoteWebDriver
Java多线程基础（二）
Java多线程基础（一）
原文地址：https://www.cnblogs.com/weigaojie/p/11198279.html