在项目中遇到需求，数据监控页面需要同时显示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. Android 滑块验证

    先上图看看实现效果 1.在 app 的 build.gradle 添加依赖 implementation 'com.luozm.captcha:captcha:1.1.2' 2.将 Captcha 添 ...

  2. yum -y install php-mysql 版本冲突

    yum -y install  php-mysql 版本冲突 2018年09月02日 19:16:59 乐于技术分享 阅读数:640   [root@itop yum.repos.d]# yum -y ...

  3. 获奖感想和Java学习总结

    获奖感想和Java学习总结 一.获奖感想 能成为小黄衫第二批的成员之一,我感到非常荣幸.我在对老师给予我的鼓励与肯定感到欣喜之余,更多的是感受到了一种鞭策与期望.小黄衫不仅仅是对我的一种奖励,更是激励 ...

  4. printf 字符串格式化

    在将各种类型的数据构造成字符串时,sprintf 的强大功能很少会让你失望.由于sprintf 跟printf 在用法上几乎一样,只是打印的目的地不同而已,前者打印到字符串中,后者则直接在命令行上输出 ...

  5. cookie和session 以及Django中应用

    cookie和session 以及Django中应用   cookie和session机制 cookie和session机制 cookie机制采用的是在客户端保持状态的方案.作用就是为了解决HTTP协 ...

  6. python 去除字符串末尾的子串

    建议使用 "字符串".replace("要去除的字符串", "") 尽量不要使用 strip() ,有时会引入意想不到的结果.strip() ...

  7. 一个价格，两份大礼！Mockplus X MindManager限时联合大促

    3月暖春,阳光明媚了,工作量也伴随气温回升了,面对那么多的tasks,效率提升已经迫在眉睫.为了更好的服务产品设计,为各位产品经理.UI设计师.UX设计师等带来更快更简单的设计解决方案,Mockplu ...

  8. 搭建django

    虚拟环境配置 pip install virtualenv 一般需要安装一个管理工具:pip install virtualenvwrapper-win 只有它可以使用workon 创建虚拟环境:mk ...

  9. Squid.conf配置详情

    squid常用命令:/usr/local/squid/sbin/squid -z 初始化缓存空间/usr/local/squid/sbin/squid 启动/usr/local/squid/sbin/ ...

  10. # 2019-2020-3 《Java 程序设计》实验一：Java开发环境的熟悉

    2019-2020-3 <Java 程序设计>实验一:Java开发环境的熟悉-------1 一.实验要求: 1 建立"自己学号exp1"的目录 2 在"自己 ...