用css将DIV等分布局

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

1、借助设置百分比实现均分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: 33%;height: 33%;float: left;}.blue{background-color: #5BC0DE;}.green{background-color: #5CB85C;}.orange{background-color: #F0AD4E;}</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>
</body>
</html>

页面显示如下图所示：

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

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

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

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则；

<!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: calc(100vw / 3);height: calc(100vh / 3);float: left;}.blue{background-color: #5BC0DE;}.green{background-color: #5CB85C;}.orange{background-color: #F0AD4E;}</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>
</body>
</html>

页面显示如下所示：

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

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

用css将DIV等分布局相关推荐

实现一个行内三个div等分_css 实现等分布局
目前移动版等分布局最常用的是 flex 等分,pc 端上用得更多则是 float. 假设父元素下有 3 个子元素,每个子元素相隔 24px,子元素等分父元素宽度实现:float + margin ( ...
实现CSS等分布局的5种方式
前面的话等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...
《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
html div布局位置横,div位置布局 CSS实现DIV居中对齐 div居右对齐 div居左对齐
使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实现DIV对齐用到关键属性有两个,一个为float一个为margin. ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
html div虚线背景,关于CSS（DIV属性，背景，连接，边框，虚线，实线，布局与命名）...
div属性 div属性 color : #999999 文字颜色 font-family : 宋体文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 ...

用css将DIV等分布局

用css将DIV等分布局相关推荐

最新文章

热门文章