在项目中遇到需求，数据监控页面需要同时显示4个板块内容，如下图：

CSS 如何将一个页面平均分成四个部分（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>

效果图如下：

由于板块内部框架生成图表的浮动问题，用上面方法会出问题，改进方法如下

CSS样式如下：

/*将页面分为4个部分*/

.clearfix:before,.clearfix:after{

    display:table;

    content:"";

}

.clearfix:after{

    clear:both;

}

.clearfix{

    *zoom:1;

}

.thewrap{

    margin-top: 16px;

    padding-left: 20px;

    padding-right: 20px;

    width: 100%;

    box-sizing: border-box;

    overflow: auto;

}

.quarter-div{

    width: 50%;

    box-sizing: border-box;

    float: left;

    overflow: auto;

}

JS代码：

<script>

    $(function(){

        var bodyH = $(window).height();

        console.log(bodyH);

        var h = bodyH/2-70;

        $(".quarter-div .panel-body").height(h);

    });

</script>

CSS 将一个页面平均分成四个部分（div）的更多相关文章

  1. css笔记：如何将一个页面平均分成四个部分？

    今天,我在刷面试题的时候,突然想到一道题:如何将一个页面平均分成四个部分(div)呢?其实难度也不大,于是直接上代码 <!DOCTYPE html> <html lang=" ...

  2. Linux下的split 命令（将一个大文件根据行数平均分成若干个小文件）

    将一个大文件分成若干个小文件方法 例如将一个BLM.txt文件分成前缀为 BLM_ 的1000个小文件,后缀为系数形式,且后缀为4位数字形式 先利用 wc -l BLM.txt       读出 BL ...

  3. 《Two Days DIV + CSS》读书笔记——CSS控制页面方式

    1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...

  4. 【学习DIV+CSS】2. 学习CSS（一）--CSS控制页面样式

    1. CSS如何控制页面 使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现C ...

  5. css美化页面

    css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...

  6. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  7. HTML+CSS实现页面

    使用HTML和CSS实现以下页面: 抽屉首页 个人博客首页 小米官网首页 登录注册页面 一.抽屉首页 1.实现目标:https://dig.chouti.com/ 2.代码: HTML: <!- ...

  8. 使用CSS隐藏HTML元素的四种常用方法

    CSS隐藏HTML元素的四种常用方法 1.opacity:设置opacity: 0可以使一个元素变得完全透明. 设置的透明度会被子元素继承,而且无法取消. 通常可以使用opacity属性来制作元素的淡 ...

  9. css隐藏页面元素的方法

    用css隐藏页面元素有许多种方法. 第一种方法[opacity: 0;] opacity属性通常用于设置一个元素的透明度,从另一个角度来看,如果透明度为0,也就从视觉上隐藏了该元素. 这个属性不是为改 ...

随机推荐

  1. mysql修改删除You can't specify target table for update in FROM clause的问题

    表中出现重复数据,需要删除重复数据,只保留一条 DELETE FROM crm_participant WHERE id IN ( SELECT c.id cid FROM crm_participa ...

  2. Python基础-python数据类型之元祖、字典（四）

    元祖 Python的元组与列表类似,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号. tuple=(1,2,3,4) print(tuple) 访问元祖 通过索引访问,也可以进行切片操 ...

  3. jq怎么给图片绑定上传文件按钮

    html代码 <img src="/img/zhengmian.png" alt="" class="file1"> <i ...

  4. 李白打酒——C++

    话说大诗人李白,一生好饮.幸好他从不开车.     一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他边走边唱:     无事街上走,提壶去打酒.     逢店加一倍,遇花喝一斗.     这一路上,他 ...

  5. python 2与python3 区别

    源码区别 python3:python2 a) py3 优美简单清晰. b) py2:源码重复,混乱,不规范,冗(rong)余(不需要特多,啰嗦). test a)    py3:可以中文也可以英文( ...

  6. CentOS_mini下安装docker 之 yum mount

    --->linux 终端输出太多前面看不到的解决办法:shift+page up --->mount命令[-参数] [设备名称] [挂载点] mkdir /mnt/CentOS mount ...

  7. 20172325 2018-2019-2 《Java程序设计》第九周学习总结

    20172325 2018-2019-2 <Java程序设计>第九周学习总结 教材学习内容总结 图的定义 图是由顶点集(VertexSet)和边集(EdgeSet)组成,针对图G,顶点集和 ...

  8. 201621123002《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...

  9. ABP框架系列之二十八：(Handling-Exceptions-异常处理)

    Introduction This document is for ASP.NET MVC and Web API. If you're interested in ASP.NET Core, see ...

  10. CodeCraft-19 and Codeforces Round #537 (Div. 2) E 虚树 + 树形dp(新坑)

    https://codeforces.com/contest/1111/problem/E 题意 一颗有n个点的树,有q个询问,每次从树挑出k个点,问将这k个点分成m组,需要保证在同一组中不存在一个点 ...