①情景：
有一父容器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属性
网友评论