今天，我在刷面试题的时候，突然想到一道题：如何将一个页面平均分成四个部分（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. Another attempt about LSI

    Last week I was here Natural Language Processing in NZ. Someone asked a question, is there any exist ...

  2. Oracle password expire notices

    /usr/local/webserver/tomcat6/logs/logbak/zsxxw.log.2015-03-21.txt:2015-03-22 00:47:26,366 ORA-28002: ...

  3. hdu 1035 Robot Motion（模拟）

    Problem Description A robot has been programmed to follow the instructions in its path. Instructions ...

  4. 记录一个js切换随机背景颜色的代码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. C#接口的使用【转】

    我们定义一个接口public interface IBark{   void Bark();}再定义一个类,继承于IBark,并且必需实现其中的Bark()方法public class Dog:IBa ...

  6. UVA 1343 The Rotation Game

    题意: 给出图,往A-H方向旋转,使中间8个格子数字相同.要求旋转次数最少,操作序列字典序尽量小. 分析: 用一维数组存24个方格.二维数组代表每个方向对应的7个方格.IDA*剪枝是当8-8个方格中重 ...

  7. QT-Creator C/C++ 打地鼠小游戏

    废话少说先上图: 这个游戏纯属土鳖思路,没有用到什么游戏引擎. 1.使用按钮或QLabel铺满窗口. 2.通过简单算法随机动态的设置按钮矩阵中某个按钮的背景图像. 3.同步2过程反复设置多个按钮背景实 ...

  8. 在ASP.NET MVC自定义错误页面

    异常处理跳转页面 第一步,在项目的Web.config文件中找到节点<system.web> 在此节点下添加配置(Error为定义的控制器也可以多添加些error标签用于区分不同的错误) ...

  9. 反编译C#的dll文件并修改，再重新生成dll

    1.把dll文件导入到ildasm工具中,ildasm是由微软提供的.net程序反编译工具,位于“C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A ...

  10. BestCoder Round #75 1003 - King's Order

    国王演讲后士气大增,但此时战争还没有结束,国王时不时要下发命令. 由于国王的口吃并没有治愈,所以传令中可能出现:“让第三军-军-军,到前线去” 这样的命令.由于大洋国在军队中安插了间谍 , 战事紧急, ...