等高布局的方式

指在同一個父容器中,子元素高度相等的布局.

從等高布局實現(xiàn)方式來說,又分為兩類

偽等高

子元素高度差依然存在,只是視覺上給人感覺就是等高.

真等高

子元素高度相等

先來看看偽等高實現(xiàn)方式

通過負margin和Padding實現(xiàn)

真等高實現(xiàn)方式

table
absoult
flex
grid
js

偽等高之-負margin和padding

主要利用負margin來實現(xiàn), 具體 負margin實現(xiàn)可以參考下這篇文章

<div class="layout parent">
<div class="left"><p>left</p></div>
<div class="center">
<p>我是中間部分的內容</p>
<p>我是中間部分的內容</p>
<p>我是中間部分的內容</p>
<p>我是中間部分的內容</p>
</div>
<div class="right"><p>right</p></div>
<div style="clear: both;">11111111111</div>
</div>

.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布局

<div class="layout parent">
<div class="left"><p>left</p></div>
<div class="center">
<p>我是中間部分的內容</p>
<p>我是中間部分的內容</p>
<p>我是中間部分的內容</p>
<p>我是中間部分的內容</p>
</div>
<div class="right"><p>right</p></div>
<div style="clear: both;">11111111111</div>
</div>

.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