前端的小玩意（6）——使用padding的左定宽、右自适应布局

①情景：

有一父容器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属性