三列自动布局

         很多时候我们都需要做一个带有圆角的图，这时会布局为左（圆角）中（平铺）右（圆角），而且中间是要根据内容自动撑开的（布局如下所示）

<div class="contain">

<div class="circleFrame">
      <div class="circleLeft">
       </div>
       <div class="circleRight">
        </div>
        <div class="circleMid">
        </div>
  </div>

<div>

注意：这里的左边和右边是放在一起的，而最外层的div是控制宽度，下面是css样式：

.contain{

width:300px;//这里设置了多少，内容就撑多少

}

.circleFrame{ width:100%;}
.circleLeft

{   width:5px;
    height: 36px;
    float: left;
    _margin-right:-5px;//这个是解决IE6下边距的bug
    background: url(../images/topLeft.gif) no-repeat;}

.circleRight

{    width:5px;
    height: 36px;
    float: right;
    _margin-left:-5px;//这个是解决IE6下边距的bug
    background: url(../images/topRight.gif) no-repeat;}

.circleMid
{    height: 36px;
      margin:0 5px 0 5px;//这里的margin左右的像素是根据左、右的宽度来定的
    background: url(../images/topMid.gif) repeat-x; }

      一开始做的时候是把中间那块设为：width：auto，但是这样的在圆角外面会有多出来的一些瑕疵，因此要设为：margin：0 5px 0 5px;中间那块只占它原来的位置，而不多站了左右圆角的位置

      虽然在IE7/8/ff下能正常，但是在IE6下会有3px的bug出现，解决此bug，需要在左圆角那里设置_margin-right:-5px;在右圆角那里设置_margin-left:-5px;注意，方向是相反的。