HTML 代码

<p class="zuo">左边 </p>  
<p class="zhong">中间</p>  
<p class="you">右边</p>  

CSS 代码1

.zuo, .you{
            width:200px;
            height:100%;
            background-color: red;
            float:left;
        }
        .zhong{
            float:left;
            width:calc(100% - 400px)
        }

该方法使用了CSS3提供的方法calc（）。 calc（）可以用来动态的得到一些值 支持+-*/运算。? 运算符号前后需要 “ ”

CSS 代码2

        .zuo,.you{
            width: 200px;
            height:100%;
            background-color: red;
            position:absolute;
        }
      .zuo{
          left:0;
      }
      .you{
         right: 0;
      }
        .zhong{
            position: absolute;
            left:200px;
            right:200px;
            background-color: yellow;
        }