今天，我在刷面试题的时候，突然想到一道题：如何将一个页面平均分成四个部分（div）呢？其实难度也不大，于是直接上代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>将页面平均分成四部分</title>

     <style type="text/css">

         *{

             margin: 0;

             padding: 0;

         }

         .main{

             width: 100%;

             height: 100%;

             position: absolute;

         }

         .quarter-div{

             width: 50%;

             height: 50%;

             float: left;

         }

         .blue{

             background-color: #5BC0DE;

         }

         .green{

             background-color: #5CB85C;

         }

         .orange{

             background-color: #F0AD4E;

         }

         .yellow{

             background-color: #FFC706;

         }

     </style>

 </head>

 <body>

     <div class="main">

         <div class="quarter-div blue"></div>

         <div class="quarter-div green"></div>

         <div class="quarter-div orange"></div>

         <div class="quarter-div yellow"></div>

     </div>

 </body>

 </html>

效果图如上。从代码上看，就是先确定一个占满全屏的div，并设置其position：absolute，而它的四个子div由于左浮动便自动浮动到相应的位置。除了这种方法，当然还有其他的方法可以解决，如果用css无非还是position的absolute和relative，如果用js解决这种布局的小问题就显得大材小用了。如果各位面试的时候遇到希望能够有用！

css笔记：如何将一个页面平均分成四个部分？的更多相关文章

  1. CSS 将一个页面平均分成四个部分（div）

    在项目中遇到需求,数据监控页面需要同时显示4个板块内容,如下图: CSS 如何将一个页面平均分成四个部分(div)呢? <!DOCTYPE html> <html lang=&quo ...

  2. Linux下的split 命令（将一个大文件根据行数平均分成若干个小文件）

    将一个大文件分成若干个小文件方法 例如将一个BLM.txt文件分成前缀为 BLM_ 的1000个小文件,后缀为系数形式,且后缀为4位数字形式 先利用 wc -l BLM.txt       读出 BL ...

  3. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  4. 通过CGAL将一个多边形剖分成Delaunay三角网

    目录 1. 概述 2. 实现 3. 结果 4. 参考 1. 概述 对于平面上的点集,通过Delaunay三角剖分算法能够构建一个具有空圆特性和最大化最小角特性的三角网.空圆特性其实就是对于两个共边的三 ...

  5. 【swift学习笔记】二.页面转跳数据回传

    上一篇我们介绍了页面转跳:[swift学习笔记]一.页面转跳的条件判断和传值 这一篇说一下如何把数据回传回父页面,如下图所示,这个例子很简单,只是把传过去的数据加上了"回传"两个字 ...

  6. css笔记02：选择器（标签式和类）

    body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...

  7. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  8. css笔记-文本样式

    聊聊text-decoration.text-indent.text-transform.letter-spacing.word-spacing.vertical-align.下面是一些常用设置文本样 ...

  9. 将一个整数M分成N个整数 要求每个都在区间【minV, maxV】之间

    将一个整数M分成N个整数 要求每个都在区间[minV, maxV]之间,怎么分比较快捷???? 说明: N是>=1且<=9的数,分割的数据只要符合[minV, maxV]区间即可,可以是等 ...

随机推荐

  1. 【HDU 4452 Running Rabbits】简单模拟

    两只兔子Tom和Jerry在一个n*n的格子区域跑,分别起始于(1,1)和(n,n),有各自的速度speed(格/小时).初始方向dir(E.N.W.S)和左转周期turn(小时/次). 各自每小时往 ...

  2. OAuth2.0认证介绍

    OAuth2.0鉴权 返回 目录 [隐藏] 1 腾讯微博OAuth2.0认证介绍 2 获取accesstoken的两种方式 2.1 1.Authorization code grant 2.1.1 第 ...

  3. C# Socket服务端和客户端互相send和receive

    服务端           {          ];          ;                                       {                       ...

  4. JQuery 拖动层

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. HTML8表单验证

    表单验证: 一.非空验证: 1.内容是不是空的. 判断值的长度是不是0.length属性.压缩空格的函数.   2.内容是不是改变了.   二.对比验证: 1.验证两个控件值的关系(相同,大小)   ...

  6. WPF那些事儿

    概述 感觉学习的东西必须做个记录,不然很快就忘掉了.现在把WPF学习过程中一些零碎的东西记录在下面,没有具体的主题,想到啥.看到啥都写在这里,算是复习一下并做个备忘吧. 1. 等待对话框 看到同事做的 ...

  7. Scala入门指南与建议

    最近在学习使用Scala语言做项目,感觉这门语言实在是太优美了!作为一个本科数学.研究生机器学习专业的混合人才(哈哈),这门语言真的是满足了普通计算机编程(告诉计算机怎么做)和函数式编程(告诉计算机做 ...

  8. spring+hibernate

    添加注解时spring是添加在set方法上而hibernate是添加在get方法上 事务应该加在service层上,而不是加在dao层上,如果加在dao层上回滚的时候只能回滚一个dao的实现. 事务处 ...

  9. 解决Linux文档显示中文乱码问题以及编码转换

    解决Linux文档显示中文乱码问题以及编码转换 解决Linux文档显示中文乱码问题以及编码转换 使vi支持GBK编码 由于Windows下默认编码是GBK,而linux下的默认编码是UTF-8,所以打 ...

  10. makefile死磕笔记

    开始我会插播一段我如何学习makefile的废话,如果不想听的话,请直接跳到我的makefile教程. 首先得先说明学习makefile真是一个痛苦的过程,尤其是用干巴巴的看书来学习的过程,简直可以用 ...