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: 0;

    

}

/*底部部分*/

.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>