关于圣杯布局和双飞翼布局
时间：2023-04-02 15:16:52
HTML
left right css:#container{padding:0100px0200px;/*左边宽度为200px，右边宽度为100px*/}.col{float:左边;位置：相对；高度：300px；}#center{宽度：100%；背景：#eee；}#left{宽度：200px；背景：蓝色；左边距：-100%；右：200px；}#right{宽度：100px；背景：红色；margin-right:-100px;}效果如图：双飞翼布局html:中心左右css:.col{浮动：左；高度：300px；}#center{宽度：100%；背景：#eee；}#left{宽度：200px；背景：蓝色；margin-left:-100%;}#right{width:100px;背景：红色；margin-left:-100px;}#center.wrap{margin:0100px0200px;}效果如图：两种布局的区别这两种布局实现了两边定宽，自适应middle，中间列放在最前面优先渲染。不同的是双飞翼布局多了一个包裹的div，去掉了相对定位，少写了css。个人认为HolyGrail的布局结构更加简洁，具体还是看自己在日常工作中的选择。
