css中的圣杯布局和双飞翼布局

发布时间：2017-11-05 22:00:16

圣杯布局布局要求：三列布局，中间自适应，两边定宽中间栏要在浏览器优先渲染 ...

圣杯布局

布局要求：

三列布局，中间自适应，两边定宽

中间栏要在浏览器优先渲染

允许任意列的高度最高

用最简单的CSS、最少的HACK语句

解释说明：

1.min-width:700px是为了当页面缩小到指定的700px的时候，页面内容宽度不再随着浏览器缩小。是为了电脑的正常浏览效果

2.注意到container设置的值0 220px 0 200px,上右下左，所以left 设置widh:200px,right设置width:220px

3.设置min-height:300px，是让三列看起来没那么的矮

4.浮动的情况下，定义负边距会使div向上移动，margin-left:-100%会使移动到最左则，然后再加上left：-200px，正好使left归位。right原理相同。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css">  *{   margin: 0;   padding: 0;  }  body{   min-width: 700px;  }  .header,.footer{  float: left;  width: 100%;  background: #f60;  height: 40px;  line-height: 40px;  text-align: center;  }  .container{   padding: 0 220px 0 200px;  }  .left,.middle,.right{   position: relative;   float: left;   min-height: 300px;  }  .middle{   width: 100%;   background: #1a5acd;  }  .left{   width: 200px;   background: #f00;   margin-left: -100%;   left: -200px;  }  .right{   width: 220px;   background: #0f0;   margin-left: -220px;   right:-220px;  } </style></head><body> <div class="header">  <h4>头部</h4> </div> <div class="container">  <div class="middle">   <h4>middle</h4>   <p>这是页面中间内容</p>  </div>  <div class="left">   <h4>left</h4>   <p>这是页面左侧内容</p>  </div>  <div class="right">   <h4>right</h4>   <p>这是页面右面的内容</p>  </div> </div> <div class="footer">  <h4>尾部</h4> </div></body></html>

双飞翼布局：

经过淘宝工程师针对圣杯布局改良后得出双飞翼布局

去掉相对布局，只需要浮动和负边距

解释说明：双飞翼布局得到的效果试图与圣杯布局一样，只不过是写法不太一样，主要是没有用container包括中间三部分，相对定位也没用到

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style type="text/css"> *{  margin:0;  padding:0; } body{  min-width:700px;  } .header,.footer{  width: 100%;  float: left;  height: 40px;  background: #ddd;  text-align: center;  line-height: 40px; } .left,.right,.middle{  float: left;  min-height: 300px; } .middle{  width: 100%;  min-height:300px;  } .middle-inner{  margin-left: 200px;  margin-right: 220px;  background: red;  min-height:300px;  } .left{  width: 200px;  background: #0F0;  margin-left: -100%; } .right{  width: 220px;  background: blue;  margin-left: -220px; } </style></head><body> <div class="header">  <h4>头部</h4> </div>  <div class="middle">   <div class="middle-inner">   <h4>middle</h4>   <p>这是页面中间内容</p>   </div>  </div>  <div class="left">   <h4>left</h4>   <p>这是页面左侧内容</p>  </div>  <div class="right">   <h4>right</h4>   <p>这是页面右面内容</p>  </div> <div class="footer">  <h4>尾部</h4> </div></body></html>