等高布局
是利用margin-bottom 可以减少自身的供 CSS 读取的高度,什么意思,我理解是这样的。
我已开始搞混的一个地方,背景是覆盖content和padding,而height和width就是content部分)(标准盒子)。
先用非常大的padding-bottom值,拉伸背景高度至非常大,再用相同大小的margin-bottom负值去抵销拉伸的背景(使overflow
在截取的时候,像是不存在这么大的padding值一样,还是根据内容来截取,不然会把padding-bottom部分截取进去),虽然说
是抵销,但其实元素的背景还是覆盖加了padding-bottom值后的范围,这时候包含块的overflow:hidden截取到内容相对最多的
那一列,其他内容较少的列content区域的高度虽然短,但是有和content同背景的padding-bottom部分来填充,形成了一个伪登
高布局。
css
.wrap{overflow: hidden;}
.left{width: 200px; background: lightcoral; padding-bottom: 9999px; margin-bottom: -9999px; float: left;}
.right{width: 300px; background: lightgreen; padding-bottom: 9999px; margin-bottom: -9999px; float: left;}
html
<div class="wrap">
<div class="left">
<p>内容</p>
<p>内容</p>
</div>
<div class="right">
<p>内容</p>
</div>
</div>