CSS三栏布局的四种方法
发布在前端分享2017年1月14日view:2421
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

1.绝对定位法

  HTML代码如下:

  

Left
  
Main
  
Right
  CSS代码如下:

  //简单的进行CSS resetbody,html{ height:100%; padding: 0px; margin:0px;   }   //左右绝对定位.left,.right{ position: absolute; top:0px; background: red; height:100%;   }.left{ left:0; width:100px;   }.right{ right:0px; width:200px;   }   //中间使用margin空出左右元素所占据的空间.main{ margin:0px 100px 200px 0px; height:100%; background: blue;   }   该方法有个明显的缺点,就是如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。

  2. 圣杯布局

  HTML代码如下:

  //注意元素次序   

Main
  
Left
  
Right
  CSS代码如下:

  //习惯性的CSS resetbody,html{ height:100%; padding: 0; margin: 0}   //父元素body空出左右栏位body { padding-left: 100px; padding-right: 200px;   }   //左边元素更改.left { background: red; width: 100px; float: left; margin-left: -100%; position: relative; left: -100px; height: 100%;   }   //中间部分.main { background: blue; width: 100%; height: 100%; float: left;   }   //右边元素定义.right { background: red; width: 200px; height: 100%; float: left; margin-left: -200px; position: relative; right: -200px;   }   相关解释如下:

  (1)中间部分需要根据浏览器宽度的变化而变化,所以要用100%,这里设左中右向左浮动,因为中间100%,左层和右层根本没有位置上去

  (2)把左层margin负100后,发现left上去了,因为负到出窗口没位置了,只能往上挪

  (3)按第二步这个方法,可以得出它只要挪动窗口宽度那么宽就能到最左边了,利用负边距,把左右栏定位

  (4)但由于左右栏遮挡住了中间部分,于是采用相对定位方法,各自相对于自己把自己挪出去,得到最终结果

  3. 双飞翼布局

  HTML代码如下:

  

  
Main   
  
  
Left
  
Right
  CSS代码如下:

  //CSS resetbody,html { height:100%; padding: 0; margin: 0}body { /padding-left:100px;/   /padding-right:200px;/}.left { background: red; width: 100px; float: left; margin-left: -100%; height: 100%; /position: relative;/   /left:-100px;/}.main { background: blue; width: 100%; float: left; height: 100%;   }.right { background: red; width: 200px; float: left; margin-left: -200px; height: 100%; /position:relative;/   /right:-200px;/}   //新增inner元素.inner { margin-left: 100px; margin-right: 200px;   }   圣杯布局实际看起来是复杂的后期维护性也不是很高,在淘宝UED的探讨下,出来了一种新的布局方式就是双飞翼布局,代码如上。增加多一个div就可以不用相对布局了,只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。

  4. 浮动

  HTML代码如下:

  //注意元素次序   

Left
  
Right
  
Main
  CSS代码如下:

  //CSS resetbody,html { height:100%; padding: 0; margin: 0}   //左栏左浮动.left { background: red; width: 100px; float: left; height: 100%;   }   //中间自适应.main { background: blue; height: 100%; margin:0px 100px 200px 0px;   }   //右栏右浮动.right { background: red; width: 200px; float: right; height: 100%;   }   这种方式代码足够简洁与高效,也容易理解

评论
发表评论
10个月前
赞了此文章!
10个月前

web学习交流请与我联系

WRITTEN BY
PUBLISHED IN
前端分享

一些前端知识和最新的分享

我的收藏