Maison >interface Web >tutoriel HTML >DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充_html/css_WEB-ITnose

DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:39:391149parcourir

作为一个前端小白,这是我面试前端职位的题目之一,没有实践经验,误打误撞,最后还是错了!

今天难得有时间,认真思考了一下。答案不一定最佳的解决方案,但是能实现同等效果。

问题描述:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为200px,中间那个DIV充满剩余的宽度。

这个题目是我当时做的第一个题目,看完题目就把答案写出来了:不就是一个float:left;的事情吗!(实践出真知,被事实赤裸裸的打败了!)

我笔试提交的代码:

  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style type="text/css">    .mainwrap{      width: 1000px;      margin: 0 auto;      height: 300px;    }    .left{      width: 150px;      height: 100%;      background: yellow;      float: left;    }    .right{      width: 150px;      height: 100%;      background: pink;      float: left;    }    .center{      width: auto;      height: 100%;      background: green;      float: left;    }  </style>  <div class="mainwrap">      <div class="left"></div>      <div class="center"></div>      <div class="right"></div>  </div>
面试官的评价:这个代码是得不到你的目标效果的。

当时他没继续追究转移了问题,后来我在电脑上尝试运行了一下代码,结果如下:


center不见了!

确实不是目标效果!顿时不知道发生了什么事!但是我明白了面试官的评价:这个代码是得不到你的目标效果的(你对HTML+CSS还不够深入)!

但是还很庆幸题目这么简单,看到这个结果才发现自己掉进面试官设计的坑都不知道!

面试都过去快5个月了,在项目中遇到类似的问题都只能把中间的div作为固定div处理,一直没认真地寻找过这个问题的解决方案。总是以小白为借口,真的错了解决很多经典问题的机会。回到正题,今天认真思考了一下,这不一定是一个最佳的解决方案,但是可以达到目标效果,代码如下:

  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style type="text/css">    .mainwrap{      width: 1000px;      margin: 0 auto;      height: 300px;    }    .left{      width: 150px;      height: 100%;      background: yellow;      float: left;    }    .right{      width: 150px;      height: 100%;      background: pink;      float: right;      position: relative;      top: -100%;    }    .center{      width: auto;      height: 100%;      background: green;      /*float: left;*/    }  </style>  <div class="mainwrap">      <div class="left"></div>      <div class="center"></div>      <div class="right"></div>  </div>

运行效果:


有这个问题有一个延伸问题;相反的,中间的div固定,左右均分剩下的宽度。

其实能解决上面那个问题,这个问题就很开放了,实现方式有很多,比如:

  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style type="text/css">    .mainwrap{      width: 1000px;      margin: 100px auto;      height: 300px;      border: 1px solid #ff0000;    }    .left{      width: 50%;      height: 100%;      background: yellow;      float: left;    }    .right{      width: 50%;      height: 100%;      background: pink;      float: right;      position: relative;      top: -100%;          }    .center{      width: 600px;      margin: 0 auto;      height: 100%;      background: green;      /*float: left;*/      position: relative;      z-index: 1000;    }  </style>  <div class="mainwrap">      <div class="left"></div>      <div class="center"></div>      <div class="right"></div>  </div>

Done!

还有谁于更好的解决方案吗?求赐教!







版权声明:本文为博主原创文章,未经博主允许不得转载。

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn