html css布局6,浅析CSS等高布局的6种方式

前面的话

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局

伪等高

边框模拟

因为元素边框和元素高度始终是相同高度，用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上，实现视觉上的等高效果

[注意]左右两侧元素高度不能大于中间元素高度，否则无法撑开容器高度

CSS Code复制内容到剪贴板

body,p{margin: 0;}

.parent{

position:relative;

}

.center{

box-sizing:border-box;

padding: 020px;

background-clip:content-box;

border-left:210pxsolidlightblue;

border-right:310pxsolidlightgreen;

}

.left{

position:absolute;

top: 0;

left: 0;

width:200px;

}

.rightright{

position:absolute;

top: 0;

rightright: 0;

width:300px;

}

XML/HTML Code复制内容到剪贴板

left