您现在的位置：首页 >> 前端 >> 内容

用CSS实现左右两栏宽度固定，中间一栏的宽度随浏览器宽度的改变而改变（代码教程）

时间：2018/4/11 15:39:28 点击：

　　核心提示：HTML 代码p class=zuo左边 /pp class=zhong中间/pp class=you右边/pCSS 代码1.zuo, .you{width:200px;height:100%;bac...

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;
        }