等高布局是指在同一个父容器里,子元素的高度相等的布局方式,等高布局的实现有伪等高和真等高,伪等高只是在视觉上给人感觉是等高而已,真等高是实实在在的等高。
伪等高的方式
其原理是:将元素padding-bottom
设置一个很大的值与margin-bottom
设置一个负很大的值,两者之间互相抵消
HTML部分
<div class="outer">
<div class="left">
left <br>
left <br>
left <br>
left <br>
left <br>
left <br>
left <br>
</div>
<div class="right">
right <br>
</div>
<div class="center">
center <br>
center <br>
center <br>
</div>
</div>
CSS部分
.outer{
/*父级元素得设置超出隐藏*/
overflow: hidden;
}
.left{
width: 100px;
background-color: red;
float: left;
/*关键代码,两者之间的值互相抵消*/
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.right{
width: 100px;
background-color: pink;
float: right;
/*关键代码,两者之间的值互相抵消*/
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.center{
background-color: #009ff2;
margin: 0 100px;
/*关键代码,两者之间的值互相抵消*/
padding-bottom: 10000px;
margin-bottom: -10000px;
}
Flex布局的方式
绝对定位的方式
后记
今天没有认真的学习,后期再补充后面两个内容