首页 > 程序开发 > web前端 > HTML/CSS >

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

2018-04-11

用CSS实现左右两栏宽度固定,中间一栏的宽度随浏览器宽度的改变而改变(代码教程)。HTML 代码

HTML 代码

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

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;
        }
相关文章
最新文章
热点推荐