CSS实现栅格布局

设置容器container：

.grid-container {

    width: 100%;

    max-width: 1200px;

}

清除浮动：

.row:before, .row:after {

    content: "";

    display: block;

    height:;

    width:;

    visibility: hidden;

    clear: both;

}

假设有12列布局：

[class*='col_'] {

    float: left;

    min-height: 1px;

    width: 8.33%;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

    -ms-box-sizing: border-box;

    -webkit-box-sizing: border-box;

}

.col_1 { width: 8.33%; }

.col_2 { width: 16.66%; }

.col_3 { width: 25%; }

.col_4 { width: 33.33%; }

.col_5 { width: 41.66%; }

.col_6 { width: 50%; }

.col_7 { width: 58.33%; }

.col_8 { width: 66.66%; }

.col_9 { width: 75%; }

.col_10 { width: 83.33%; }

.col_11 { width: 91.66%; }

.col_12 { width: 100%; }

实例：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <link rel="stylesheet" type="text/css" href="style.css">

     <title>自适应布局</title>

     <style type="text/css">

         body {

             margin: 0;

         }

         .header {

             background-color: #000;

             color: #fff;

             height: 5vh;

             text-align: center;

             line-height: 5vh;

         }

         .footer {

             width: 100%;

             background-color: #000;

             color: #fff;

             height: 5vh;

             text-align: center;

             line-height: 5vh;

             position: fixed;

             bottom: 0;

         }

         .grid-container {

             margin: 0 auto

         }

         .col_3 {

             height: 90vh;

             background-color: #ddd;

         }

         .col_9 {

             height: 90vh;

             background-color: #ccc;

         }

     </style>

     <script type="text/javascript">

         let width = document.documentElement.getBoundingClientRect().width;

         // 1rem = 1vw;

         let rem = width/100;

         document.documentElement.style.fontSize = rem+'px';

     </script>

 </head>

 <body>

 <header class="header">header</header>

 <div class="grid-container">

     <div class="row">

         <div class="col_3">col_3</div>

         <div class="col_9">col_9</div>

     </div>

 </div>

 <footer class="footer">footer</footer>

 </body>

 </html>

CSS实现栅格布局的更多相关文章

  1. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  2. CSS栅格布局

    CSS栅格布局 认识栅格布局 CSS的栅格布局也被称为网格布局(Grid Layout),它是一种新兴的布局方式. 栅格布局是一个二维系统,这意味着它可以同时处理列和行,与弹性布局相似,栅格系统也是由 ...

  3. CSS：谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  4. CSS 栅格布局

    bootstrap3.0教程之栅格系统原理(布局) http://www.jb51.net/css/152846.html [div+css]栅格化布局样式备用坑 http://www.0773lin ...

  5. 你不知道的css各类布局（二）之流体布局、液体布局、栅格布局

    流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...

  6. 你不需要基于 CSS Grid 的栅格布局系统

    在过去的几个星期里,我开始看到基于 CSS Grid 的布局框架和栅格系统的出现.我们惊讶它为什么出现的这么晚.但除了使用 CSS Grid 栅格化布局,我至今还没有看到任何框架能提供其他有价值的东西 ...

  7. Bootstrap 框架 栅格布局系统设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

  8. 【响应式】foundation栅格布局的“尝鲜”与“填坑”

      提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙 ...

  9. grid栅格布局

    前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...

随机推荐

  1. 【Oracle】闪回drop后的表

    本文介绍的闪回方式只适用于:删除表的表空间非system,drop语句中没有purge关键字(以上两种情况的误删除操作只能通过日志找回): 1.删除表后直接从回收站闪回 SCOTT@LGR> d ...

  2. angular.js表单验证

    表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=& ...

  3. React从安装到实战

    建议:初学者看之前请先看一遍菜鸟教程 可以安装一个ATOM编辑器,本人觉得很好用 一.安装并启动项目:网址  搭建好的项目目录为: 二.开始写项目: 1.组件到界面流程: 定义一个组件app.js导出 ...

  4. 数据库之JDBC入门

    数据表: 代码实现(注:jar包用的8.0版本) import java.sql.*; import java.util.Scanner; public class MyDatabase { publ ...

  5. C++基础 (10) 第十天 C++中类型转换 异常 栈解旋 io操作

    1之前内容的回顾 C语言中的类型转换(int)a  强转可读性太差了 C++把()拆分成了四种转换方式 static_cast static_cast在编译器编译阶段就进行转换了 2.dynamic_ ...

  6. vue 函数配置项watch以及函数 $watch 源码分享

    Vue双向榜单的原理     大家都知道Vue采用的是MVVM的设计模式,采用数据驱动实现双向绑定,不明白双向绑定原理的需要先补充双向绑定的知识,在watch的处理中将运用到Vue的双向榜单原理,所以 ...

  7. [USACO08FEB]修路Making the Grade 动态规划

    对的\(n^3\)的程序调了一个月了,惊了... HSZ学oi\(\Longleftrightarrow\)闭眼学oi 要不是翻旧账还看不见.. 这是有\(n^2\)做法的. 参见LYD的书P244 ...

  8. 关于NumPy的坑

         初次接触NumPy的时候,感叹这个功能的强大,实现了Python对矩阵的运算,但在写一个项目的时候,发现了一个巨坑无比的情况     分隔符=================     对于被 ...

  9. 提高生产力：SpringMVC中，使用扩展数据类型TypedMap接收Web请求参数

    在Web项目中,如果前端MVC框架使用的是SpringMVC,可以使用Map接收前端请求参数,比bean要方便很多. 尤其是SpringMVC和Mybatis一起用的时候,用Map大大减少了需要的be ...

  10. 【ACM-ICPC 2018 南京赛区网络预赛 L】Magical Girl Haze

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 定义dis[i][j]表示到达i这个点. 用掉了j次去除边的机会的最短路. dis[1][0]= 0; 在写松弛条件的时候. 如果用 ...