[CSS]不用hack的css动态布局方案，兼容主流浏览器

优点：
1.不用hack，易于理解和维护
2.可通过设置容器宽高来改变内部元素，免去定死宽高的烦恼

注意：
1.容器的高度不包括上下部分的高度
2.调整内部元素宽高需要调整外层div的padding属性
3.多出了2px的地方是因为设置了border属性,通常是没有的

<style type="text/css">
            div {
                border: 1px solid black;
            }
</style>
 <div style="margin:auto;width:300px;height:300px;position:relative;padding-top:42px;padding-bottom:52px;">
            <div style="width:100%;height:40px;position:absolute;top:0;left:0">
                上
            </div>
            <div style="height:100%;padding-left:102px;padding-right:102px;position:relative;">
                <div style="height:100%;width:100px;position:absolute;top:0;left:0;">
                    左
                </div>
                <div style="height:100%;width:100%;">
                    中
                </div>
                <div style="height:100%;width:100px;position:absolute;top:0;right:0;">
                    右
                </div>
            </div>
            <div style="width:100%;height:50px;position:absolute;bottom:0;left:0">
                下
            </div>
        </div>