今天，我在刷面试题的时候，突然想到一道题：如何将一个页面平均分成四个部分（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. SQLCLUSTER sql数据库监测工具

    SQLCLUSTER sql数据库监测工具

  2. hdu 4496 D-City（并查集）

    Problem Description Luxer is a really bad guy. He destroys everything he met. One day Luxer went to ...

  3. ASP.NETURL地址防注入过滤问题

    首先在Global.asax.cs里面配置一个 提交事件  不用过滤所有的地址 过滤 GET POST的地址就行了 /// <summary> /// 防止sql注入 /// </s ...

  4. Activity（三）

    常用控件 EditView.TextView.Button 设置layout,在fragment_main.xml配置控件 配置可编辑文本控件factorOne.factorTwo,显示文本控件sym ...

  5. CSS备忘-1

    CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style" 属性 内部样式表 -在HTML文档头部 <head> 区域使用<sty ...

  6. ChartControl简单的圆柱案例

    由于工作需要,最近学习了DevExpress控件中的ChartControl,并做了简单尝试,通过程序动态添加数据源到chartControl控件中,绘制了如下的条形图. 条形图的颜色等外观可在cha ...

  7. JavaScript中的setAttribute用法

    我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题. setAttribute(string nam ...

  8. 解决水晶报表在IIS7下的权限问题。

    http://52live.blog.sohu.com/69025059.html 解决水晶报表在IIS7下的权限问题. 有些事情真是“踏破铁鞋无觅处,得来全不费功夫”!困扰了我一段时间的水晶报表在I ...

  9. C# for循环①护栏长度 ②广场砖面积 ③判断闰年平年

        // static void Main(string[] args)         { const double PI = 3.14;             const int BAR_U ...

  10. Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...