今天，我在刷面试题的时候，突然想到一道题：如何将一个页面平均分成四个部分（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. MarkDown基础使用教程-by sixleaves

    以下是个人浏览文档,结合自己平时使用所总结, 和引用国外关于如何使用markdown的教程.如有不足,还请海涵,期待于您的交流.我觉得使用markdown书写挺好的! 工具下载,可以去下载gitboo ...

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

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

  3. paip.svn使用最佳实践

    paip.svn使用最佳实践 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/attilax 1 ...

  4. Mvc5+Entity Framework6 之二----在MVC中用Entity Framework实现基本的CRUD

    目标:创建控制器和视图的代码,实现CRUD(创建,读取,更新,删除)功能 创建一个详细信息页 控制器为Students的Index页生成的代码排除Enrollments属性在外,因为该属性中关联着一个 ...

  5. SQL Server 2012 Enterprise Edition安装过程详解(包含每一步设置的含义)

    一.启动安装程序,点击“安装”选项卡,选择“全新SQL Server独立安装或向现有安装添加功能”.(首次安装数据库系统或向现有数据库系统添加功能,均选择此选项) 二.随后,安装程序进行“安装程序支持 ...

  6. 获取json对象长度

    JSON对象变化万千,非常灵活,对应的获取方法分别为: 1.最简单类型的(myObject是对象,不是字符串哦) <script type="text/javascript" ...

  7. struts2.3.15.3中动态方法调用默认是关闭的

    初学ssh,用的struts2.3.15.3,使用了如下表单: <form action="/spring3/index/login.action" method=" ...

  8. sqlyog绿色破解版

    http://pan.baidu.com/s/1mghyUrY 下载地址

  9. Reset Password Functionality FAQ

    In this Document   Purpose   Questions and Answers   How can users request a password reset?   How d ...

  10. HDU 2473 - Junk-Mail Filter ，并查集的删点

    Problem Description Recognizing junk mails is a tough task. The method used here consists of two ste ...