等高布局 详解
3:等高布局
height:auto时的现象
height:auto 全部都是内容撑开
每一列盒子高度同时变化,以最高的那列为基准 整个盒子的高度应该取决于最高的那列
3:真等高—>背景盒子法
原理：父盒子取决于内容盒子里最高的盒子的高度
1.多列浮动并排 清除浮动影响
2.给最外侧的盒子再套几个盒子 套的盒子数量 =列的数量（每一列都要分配一个背景盒子）
<div class="c">
<div class="b">
<div class="a">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
</div>
</div>
<mark>三个小盒子 width设置相同 width：100%；</mark>
3.先移动倒数第二层的盒子, 然后依次移动倒数 第三层…
设置负外边距移动
.a {
width: 100%;
margin-left: -30%;
background-color: #ff0;
}
.b {
width: 100%;
margin-left: -30%;
background-color: red;
}
.c {
width: 100%;
background-color: green;
}
4.移动相应的列到相应的背景盒子 通过相对定位正值 第一个移动的 向右移动的是第三列+第二列的宽度…
5.最外侧盒子添加一个overflow：hidden；
[外链图片转存失败(img-hbS19LhQ-1563410161276)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1563410014624.png)]
缺点：需要嵌套多个标签 结构略微复杂 理解也比较困难
优点：真的等高，兼容性较好
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> * {
padding: 0; margin: 0; } .a {
width: 100%; margin-left: -30%; background-color: #ff0; } .b {
width: 100%; margin-left: -30%; background-color: red; } .c {
width: 100%; background-color: green; } .left {
width: 40%; height: 100px; float: left; position: relative; right: 60%; } .center {
width: 30%; height: 150px; float: left; position: relative; right: 60%; } .right {
width: 30%; height: 200px; float: left; position: relative; right: 60%; } </style>
</head>
<body>
<div class="c">
<div class="b">
<div class="a">
<div class="left">第一列</div>
<div class="center">第二列</div>
<div class="right">第三列</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</body>
</html>
哔哩哔哩公司氛围 96人发布