符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章给大家介绍css中有哪些实现等高布局常的方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为雨花企业提供专业的成都做网站、网站制作,雨花网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
等高布局的方式
指在同一个父容器中,子元素高度相等的布局.
从等高布局实现方式来说,又分为两类
伪等高
子元素高度差依然存在,只是视觉上给人感觉就是等高.
真等高
子元素高度相等
先来看看伪等高实现方式
通过负margin和Padding实现
真等高实现方式
table
absoult
flex
grid
js
伪等高之-负margin和padding
主要利用负margin来实现, 具体 负margin实现可以参考下这篇文章
left
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
right
11111111111
.parent{ position: relative; overflow:hidden; color: #efefef; } .center, .left, .right { box-sizing: border-box; float: left; } .center { background-color: #2ECC71; width: 60%; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; } .left, .right, .center { margin-bottom: -99999px; padding-bottom: 99999px; }
真实等高之 - table布局
left
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
right
11111111111
.parent{ position: relative; display: table; color: #efefef; } .center, .left, .right { box-sizing: border-box; display: table-cell } .center { background-color: #2ECC71; width: 60%; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; }
真实等高之 - absolute
left
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
right
.parent{ position: absolute; color: #efefef; width:100%; height: 200px; } .left, .right, .center { position: absolute; box-sizing: border-box; top:0; bottom:0; } .center { background-color: #2ECC71; left: 200px; right: 300px; } .left { width: 200px; background-color: #1ABC9C; } .right { right:0; width: 300px; background-color: #3498DB; }
真实等高之 - flex
.parent{ display: flex; color: #efefef; width:100%; height: 200px; } .left, .right, .center { box-sizing: border-box; flex: 1; } .center { background-color: #2ECC71; } .left { background-color: #1ABC9C; } .right { background-color: #3498DB; }
left
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
right
真实等高之 - grid
.parent{ display: grid; color: #efefef; width:100%; height: 200px; grid-template-columns: 1fr 1fr 1fr; } .left, .right, .center { box-sizing: border-box; } .center { background-color: #2ECC71; } .left { background-color: #1ABC9C; } .right { background-color: #3498DB; }
left
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
right
真实等高之 - js
获取所有元素中高列,然后再去比对再进行修改
left
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
我是中间部分的内容
right
.parent{ overflow: auto; color: #efefef; } .left, .right, .center { float: left; } .center { width: 60%; background-color: #2ECC71; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; }
// 获取高元素的高度 var nodeList = document.querySelectorAll(".parent > div"); var arr = [].slice.call(nodeList,0); var maxHeight = arr.map(function(item){ return item.offsetHeight }).sort(function(a, b){ return a - b; }).pop(); arr.map(function(item){ if(item.offsetHeight < maxHeight) { item.style.height = maxHeight + "px"; } });
关于css中有哪些实现等高布局常的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。