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{        width: 900px;        height: 300px;        overflow: hidden;        box-sizing: border-box;    }    .container>.row{        width: 100%;        height:100%;        float: left;        overflow: hidden;    }

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

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

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

原文地址：https://www.cnblogs.com/weigaojie/p/11198279.html

时间： 2024-10-10 22:17:08

12栅格化布局的相关文章

移动端rem布局和百分比栅格化布局

移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口宽度,p(比例尺)= 视口宽度/效果图宽度根元素font-size=100px*p 然后来个resize去跟随浏览器大小变化 1(function (win){ 7 var doc = win.document, 8 html = doc.documentElement, 9 option = h

ExtJS中layout的12种布局风格

原文地址: http://www.cnblogs.com/mingforyou/p/4119200.html ExtJS中layout的12种布局风格 extjs的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种. 另外几种见: http://www.sencha.com/deploy/dev/examples/layout-browser/l

Bootstrap中的栅格化布局

bootstarp的栅格化布局使得我们布局简单,我们只需要利用.container/.container-fluid,.row即可实现,其下是一个例子: <div class="container-fluid"> <h3 class="text-primary text-center">jQuery Playground</h3> <div class="row"> <div class=&q

bootstrap栅格化布局

这几天研究了bootstrap响应式布局,其实现原理如下 : 首先用@media查询当前屏幕的大小,然后根据屏幕大小显示不同样式,样式都是用%定义的. 自己模仿也实现了类似的布局,代码如下: //html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自己实现栅格布局</title> <link href="css/mys

x01.Weiqi.12: 定式布局

定式下一步当将定式保存到数据库中,如布局中的代码所示,但其初始的代码更有利于理解.以小飞挂为例: // 0 // + 0 0 // + // // + List<Pos> P_LuStar_UpFlyOne { get { var temp = new List<Pos>(); temp.Add(new Pos(3, 3)); // 第一步:左上星 temp.Add(new Pos(2, 5)); // 第二步:小飞挂 temp.Add(new Pos(5, 2)); // 第三

关于bootstrap3的栅格化布局

container用于固定宽度并支持响应式布局的容器container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器. .col-xs-1-12 手机 (<768px).col-sm-1-12 小屏幕平板 (≥768px).col-md-1-12 中等屏幕桌面显示器 (≥992px).col-lg-1-12 大屏幕大桌面显示器 (≥1200px) 列偏移 col-xs/sm/md/lg-offset-* 列排序 col-xs/sm/md/lg-push-* 向

任务八：响应式网格（栅格化）布局

任务目的使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局,根据屏幕宽度,元素占的栏数不同. 任务描述需要实现如效果图所示,调整浏览器宽度查看响应式效果,效果图中的红色的文字是说明,不需要写在 HTML 中. 任务注意事项网格布局的作用在于更有效地控制元素在网页中所占比例的大小.比如,博客中有一个留言板模块,在比较大的屏幕上,我们希望它占了右边 25% 的宽度,在手机等比较小的屏幕上,我们希望它占 100% 的宽度,出现在博客文章下方.网格布局是一种实

Flex布局【弹性布局】学习

先让我们看看在原来的学习中遇到的问题之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以遇到了很多问题,自己花费了太多时间去解决问题,今天就拿其中一个比较让我头疼的问题来引出今天的话题当时在初识html.css的时候,遇到了水平排放的问题,当然这个一下子就查出来了,使用 float ,但是使用了 float 会使子元素脱离父元素的布局,父元素的高度会变成 0 ,从而根本展示不出来这

响应式Web设计 - 布局

可扩展的布局有一种流体布局的概念在早起web兴起的时,就开始盛行了.它的概念是说页面会根据浏览器窗口的变化进行更改,网站可以通过维护一套代码,保质一致性的设计.我这里强调的可扩展的布局也是基于这个概念,只是现在的方法多种多样,因此要强调页面布局的可扩展性. 可扩展的布局途径有很多,比如常见的百分比布局,以及一直未成为标准的栅格布局等等. 框架就从这框架来说,以一个常见的可扩展的三栏布局为例,就有数十种方法,这里抛砖引玉举几个例子. 方法1: Demo1 方法2: Demo2 方法3: Dem