①情景:
有一父容器div,其高和宽不定,称之为P;
该父容器有两个子div,左右布局,左定宽,满高,右自适应剩余区域;
其中,定宽称之为A,变宽称之为B;
A和B是等高的;
P必然能容纳A和B
可能的附加条件:
【1】A和B的宽高度可能不会撑满P,即上下左右都可能留有空隙,但这些空隙的宽或者高是已知的;
【2】A和B之间可能有一定间隙;
备注:
【1】左自适应右定宽方法同理;
【2】上下布局同理;
②方法:
原理:利用P的padding属性和A的margin属性来布局;
【1】由于P宽高不定,因此可以忽视对P的宽高设置;
【2】假设A的宽度为100px;A距离左侧10px,距离B有10px。因此,B的左侧实际有120px宽度;先设置P的css属性如下设置:
.P { padding-left: 120px; width: 略; height: 略; }
【3】设置A的CSS属性,如果要加border属性,那么需要注意A和B的box-sizing要设置为border-box
.A{ margin-left: -110px; width: 100px; box-sizing: borer-box; float:left; }
Note:
《1》如果有border属性,那么content区域要对应减少border的宽度(并且如果两侧都有,那么是双倍的宽度);
《2》必须添加float属性,以使其脱离文档流;假如抛弃float属性,而采用display:inline-block属性的话,会导致右侧的B会靠近A,而不是在我们预想的区域之中。
【4】设置B的CSS属性,没有什么特殊的,只需要设置宽高为100%即可;
.B{ width: 100%; height: 100%; box-sizing: border-box; }
③如此,便能实现左定宽,右变宽的布局了;并且由于没有使用CSS3属性,并且margin的范围没有超出P的盒模型,因此相对兼容性也很好。
④可能存在的问题:
【1】由于使用了float属性,也许在某些版本的浏览器中可能出现问题(真有这种可能?);
解决办法:
取消A的float属性,用以下CSS替代:
display: inline-block; ——A和B都设置 vertical-align: top; ——A和B都设置 margin-right: 若干px; ——A设置,注意:这行的值可能并非10px,也许只有5px
【2】A的内部文字,在右侧可能溢出的问题:
解决办法:对A设置padding-right属性