用css将DIV等分布局

2023-12-14 14:15| 来源: 网络整理| 查看: 265

在工作中经常会出现需要讲一个div等分为几部分的需求，现整理方法如下：

1、借助设置百分比实现均分div，代码如下所示：

将页面平均分成四部分 *{ margin: 0; padding: 0; } .main{ width: 100%; height: 100%; position: absolute; } .quarter-div{ width: 33%; height: 33%; float: left; } .blue{ background-color: #5BC0DE; } .green{ background-color: #5CB85C; } .orange{ background-color: #F0AD4E; }

页面显示如下图所示：

目前div是按照横向（x轴）等分的，若需要按照纵向（y轴）等分，只需要去掉quarter-div类中的float：left属性设置即可（因为div本来就是块级元素，故会每个占用一行显示，设置float：left会使其显示在一行，因此需要纵向等分的话，则不用设置float：left，按照原始显示即可）。页面显示如下所示：

2、使用 calc() 函数动态设置宽高

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 "+", "-", "*", "/" 运算；calc()函数使用标准的数学运算优先级规则；将页面平均分成三部分 *{ margin: 0; padding: 0; } .main{ width: 100%; height: 100%; position: absolute; } .quarter-div{ width: calc(100vw / 3); height: calc(100vh / 3); float: left; } .blue{ background-color: #5BC0DE; } .green{ background-color: #5CB85C; } .orange{ background-color: #F0AD4E; }

页面显示如下所示：

目前整理方法为两种，日后有更好的方法会继续进行更新！还望大家多多指教！

参考文献：CSS 将一个页面平均分成四个部分（div）_weixin_34174105的博客-CSDN博客

【本文地址】

公司简介

联系我们