今天，我在刷面试题的时候，突然想到一道题：如何将一个页面平均分成四个部分（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. 【hihocoder 1249 Xiongnu's Land】线性扫描

    2015区域赛北京赛区的三水,当时在赛场上没做出的原因是复杂度分析不正确导致把方法想复杂了.近来复习复杂度分析,觉得不能只是笼统地看渐进复杂度(big-O),更应根据算法的伪码计算真正的以基本操作数为 ...

  2. java 解析 xml （DOM方法全）

    Java 处理 XML 的三种主流技术及介绍 http://www.ibm.com/developerworks/cn/xml/dm-1208gub/ 这篇文章讲的比较详细,下面我主要介绍 dom方法 ...

  3. php float 转int

    round(x,prec) 参数 描述 x 可选.规定要舍入的数字. prec 可选.规定小数点后的位数. <?php echo(round(0.60)); echo(round(0.50)); ...

  4. 6T GPT 移动硬盘在linux下的挂载

    实验室拿来了一个6T的移动硬盘,拿到后没有分区就直接用了,在Windows上用的好好的,插到上Linux后起初不会挂载,折腾了一会,成功挂载,很简单. 运行fdisk –l后,显示如下: 很明显,sd ...

  5. 自动工作负载库（Automatic Workload Repository，AWR）

    自动工作负载库(Automatic Workload Repository,AWR)AWR的由来:    10g之前的oracle:用户的连接将产生会话,当前会话记录保存在v$session中:处于等 ...

  6. UIButton 设置字体大小

    btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @"search" forState: UIControlS ...

  7. Android学习之菜单

    android中包含多种菜单,本例带来的是选项菜单和上下文菜单. 1.选项菜单 在android中,开发者可以在xml文档中部署所要添加的菜单,在后台调用即可. <menu xmlns:andr ...

  8. JSON 解析第三方框架

    常见的 JSON 解析第三方框架 JSONKit(最快) SBJson TouchJSON 以上三个框架的性能依次降低! 介绍 JSONKit 第三方框架的目的 JSON 的解析并不是表面上那么简单 ...

  9. ZOJ 3261 - Connections in Galaxy War ，并查集删边

    In order to strengthen the defense ability, many stars in galaxy allied together and built many bidi ...

  10. centOs下的php+mysql+apache+ftp配置

    在安装服务器时做了相应的笔记,这个方法是亲身经验成功的,随着版本的不断更新,也许会有一些地方不同,但是基本原理都是一样的. 1.安装CentOS 6 ,可以选择最小安装,也可以安装桌面 2.升级系统 ...