css box 等高布局,css实现等高布局有哪些方式
什么是等高布局？
指在同一個父容器中，子元素高度相等的布局。
從等高布局實現方式來說分為兩類：
1、偽等高
子元素高度差依然存在,只是視覺上給人感覺就是等高。
2、真等高
子元素高度相等。
偽等高實現方式：
通過負margin和Padding實現
真等高實現方式：
1、table
2、absoult
3、flex
4、grid
5、js
(推薦教程：CSS入門教程)
偽等高之-負margin和padding
主要利用負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視頻教程
總結
以上是生活随笔為你收集整理的css box 等高布局,css实现等高布局有哪些方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云服务器 web网站吗,web云服务器免
- 下一篇： css 首字下沉 错位,css+div错