你的位置:首页 > 网页设计

[网页设计]【css面试题】三个DIV要求水平对齐,左右两个DIV宽度固定为100px,中间那个DIV充满剩余的宽度(至少2种方法)


这是我在一家公司面试时遇到的问题,当时没有答上来!!

 

所以看到的小伙伴一定要注意了!!

 

变化浏览器宽度可看到效果:





 

然后我们来看看代码:

第一种方法:(浮动)

<style type="text/css">    .left,.right,.center{      border:1px solid;      height:100px;      text-align: center;      line-height:100px;      font-size:50px;    }    .left{      float:left;      width:100px;    }    .right{      float:right;      width:100px;    }    .center{      margin:0 100px;    }</style><div>  <div class="left">左</div>  <div class="right">右</div>  <div class="center">中</div></div>

 

第二种方法:(绝对定位)

<style type="text/css">    .container{      position: relative;    }    .left,.right,.center{      position:absolute;/*增加绝对定位*/      top:0;      border:1px solid;      height:100px;      text-align: center;      line-height:100px;      font-size:50px;    }    .left{      left:0;      width:100px;    }    .right{      right:0;      width:100px;    }    .center{      width:auto;      left:100px;      right:100px;    }</style><div class="container">  <div class="left">左</div>  <div class="right">右</div>  <div class="center">中</div></div>

 

当然还有很多方法,如果你有什么更好的方法,希望你能在下面评论出来,我们大家一起学习