div box container随主体内容自动扩展适应的实现

/**顶部部分*/
.con-tl{
    background:url(../images/left.png) no-repeat 0 0 rgba(0, 0, 0, 0);
    padding-left: 26px;/*padding-left的值为左边的圆角图片的宽度，必须指定**/
}
.con-tr{
    background:url(../images/right.png) no-repeat right 0 rgba(0, 0, 0, 0);
    padding-right: 26px;/*padding-right的值为右边的圆角图片的宽度，必须指定**/
}
.con-tc{
    background:url(../images/center2.png) repeat-x 0 0 rgba(0, 0, 0, 0);
    height: 40px;/*这个为中间的横向平铺图片的高度，必须指定*/
    line-height: 40px;
    overflow: hidden;
}
.con-tc-title{
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    font-weight: bold;
    margin-left: 5px;
}
/*中间部分*/
.con-cl{
    background:url(../images/border_dian.png) repeat-y;
    padding-left: 1px;/*padding-left的值为左边的纵向平铺图片的宽度**/
}
.con-cr{
    background:url(../images/border_dian.png) repeat-y right 0;
    padding-right: 1px;/*padding-right的值为右边的纵向平铺图片的宽度**/
}
.con-cc{
    padding:;

}
/*底部部分*/
.con-bl{
    background:url(../images/left.png) no-repeat 0 0;
    padding-left: 26px;/*padding-right的值为左边的圆角图片的宽度，必须指定**/
}
.con-br{
    background:url(../images/right.png) no-repeat right 0;
    padding-right: 26px;/*padding-right的值为右边的圆角图片的宽度，必须指定**/
}
.con-bc{
    background:url(../images/center2.png) repeat-x 0 0;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}

HTML

<div style="margin: 0 auto; width: 300px;">
    <div class="con-tl">
        <div class="con-tr">
            <div class="con-tc">
                <div class="con-tc-title">这里是标题</div>
            </div>
        </div>
    </div>
    <div class="con-cl">
        <div class="con-cr">
            <div class="con-cc">
                <div style="width: 300px; height: 200px;">
                    这里显示内容
                </div>
            </div>
        </div>
    </div>
    <div class="con-bl">
        <div class="con-br">
            <div class="con-bc"></div>
        </div>
    </div>

</div>