3-21 三列布局的其他方法补充
引言
前边说了三列布局的三种方法，博主经过了解发现，原来还有其他的办法，今天我们就来聊一聊其他的方法
方法一：calc实现三列布局
css
.outer{
height: 300px;
}
.left{
float: left;
width: 100px;
height: 300px;
background-color: blueviolet;
/*负父容器的宽度，即可移到对应的位置*/
margin-left: -100%;
}
.content{
/* 使用 calc 计算 内容所占的空间 */
width: calc(100% - 200px);
float: left;
background: crimson;
height: 300px;
/*将左右位置空开留给左右box*/
margin: 0 100px;
}
.right{
width: 100px;
float: right;
background-color: aqua;
height: 300px;
/*负自身的宽度，即可移动到原来的位置*/
margin-left: -100px;
}
html
<div class="outer">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
分析：
- 优点，内容盒子优先渲染，可以进行等高布局
- 缺点，兼容性差，主要针对ie
综上所述我们来看看，使用这种布局实现等高布局
css
.outer{
overflow-y: hidden;
}
.left{
float: left;
width: 100px;
background-color: blueviolet;
margin-left: -100%;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.content{
/* 使用 calc 计算 内容所占的空间 */
width: calc(100% - 200px);
float: left;
background: crimson;
margin: 0 100px;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.right{
width: 100px;
float: right;
background-color: aqua;
margin-left: -100px;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
html
<div class="outer">
<div class="content">
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
</div>
<div class="left">
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
</div>
<div class="right">
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
我是内容盒子 <br>
</div>
</div>
解释
已知padding-box中是无法右内容的，padding-bottom向下撑开容器的高度，在使用margin-bottom将其实际所占空间，减少撑开的高度 ，实际外观没有发生改变，但实际高度却回归到原大小,父级使用overflow: hidden;将溢出内容盒子的部分隐藏，达到三列完全相等的状态
overflow: hidden 只针对内容盒子的溢出情况，
