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

    Longtail Hedgehog time limit per test 3 seconds memory limit per test 256 megabytes input standard i ...

  2. DEDE列表页调用TAG标签

    [field:id function=GetTags(@me)/] 标签就可以调用出来了 只不过不带连接的,如果需要连接,请注释include\helpers\archive.helper.php文件 ...

  3. Linux 程序启停脚本

    start.sh #!/bin/sh java -jar ./program.jar & echo $! > /var/run/program.pid stop.sh #!/bin/sh ...

  4. button属性值

    AccessibilityObject 取得指定給控制項的 AccessibleObject. (繼承自 Control). AccessibleDefaultActionDescription 取得 ...

  5. WorkFlow WF如何为一个集合赋值

    今天刚刚开始学习WorkFlow.无奈WF网络上的学习资料实在太少. 刚刚学到Foreach控制流的使用,需要一个集合参数.经研究,静态赋值可以搞定.动态赋值还没. 首先添加一个List<int ...

  6. （转）C#反射机制详解

    反射的定义:审查元数据并收集关於它的类型信息的能力,元数据(编辑后的基本数据单元)就是一大堆表,编译器会创建一个类定义表,一个字段定义表,一个方法定义表等,System.Reflection命名空间包 ...

  7. pythonj基础之 多线程

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  8. Vijos 1002 过河

    这是我写的在Vijos上的第一题.这道题在我刚学完DP的时候,就做过.当时年少轻狂,没有看数据的范围,直接暴力DP,结果TLE....后来就没有再碰过.知道最近觉得快要省赛了,有必要把原来没有做出来的 ...

  9. Linux下 静态链接库 和 动态链接库

    先来说说C/C++编译过程 编译: 检查语句符号定义,将C/C++代码翻译生成中间语言. 链接: 将中间代码整合,生成可执行的二进制代码. 简单的说,库文件都是一种特殊的中间语言文件,静态库还是一种特 ...

  10. Android Studio 没有assets目录的问题

    Where to place the assets folder in Android Studio   If you are having problems with asset files not ...