CSS常用布局之——等分等高解决方案

html-css013

CSS常用布局之——等分等高解决方案,第1张

先看看等分的布局方案

1. float

兼容性较好（IE 8以上）

**2. flex **

兼容性较差（flex属于css3）

兼容性：IE8及以上

3. table

兼容性：可以兼容 IE 8

1. table

利用 table 的特性——每列等宽

2. flex

3. float

伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。

那就不能用line-height了，因为整个行高的范围都算作a标签的，可以改用其他方法，比如：

.box {

......

line-height: 1

......

padding: 19px 10px 0

}

如果你是要背景颜色之类的等高的话，就把背景颜色切高1px，横向的切一条，用在父框架，在content的位置向下平铺就可以了，会背景图片定位就行了，

如果是要边框之类的等高，那你只能用js控制了

还有，别用绝对定位，绝对定位解决不了高度问题

<script>

var Lh = document.getElementById("local")

var Rh = document.getElementById("content")

if (Lh.offsetHeight>Rh.offsetHeight)

{

Rh.style.height = Lh.offsetHeight+"px"

}else{

Lh.style.height = Rh.offsetHeight+"px"

}

</script>