css圣杯布局和双飞翼布局

 圣杯布局





  
  
  
  Document



  

实现圣杯布局

center
left

双飞翼布局





  
  
  
  双飞翼布局



  
mid
left
right

总结

相同点:

都实现了三栏布局,都使用了浮动

不同点:

圣杯布局是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。

双飞翼布局是通过float+margin没有使用相对定位

对于两列的处理:

圣杯布局是给外部容器加padding,通过相对定位把两边定位出来。

双飞翼布局是靠在中间这层外面套一层divpadding将内容挤出来中间。

你可能感兴趣的:(前端,css,前端)