6种CSS经典三栏布局的方法②

更多最新IT资讯尽在金顺软件园http://www.jinshun168.com/

　　4. 双飞翼布局

　　双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：

　　既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了：

　　唯一需要注意的是，需要在main后面加一个元素来清除浮动。

　　5. flex布局

　　flex布局是趋势，利用flex实现三栏布局也很简单，不过需要注意浏览器兼容性：

　　有几点需要注意一下：

　　main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1

　　flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果。

　　6. 绝对定位

　　绝对定位的方式也比较简单，而且可以优先加载主体：

　　以上就是本文的全部内容，希望对大家的学习有所帮助。

    金顺软件园小编推荐：

    css3 border-radius有什么属性

    TexturePacker怎么一键生成CSS sprites

以上，就是金顺软件园小编给大家带来的6种CSS经典三栏布局的方法②全部内容，希望对大家有所帮助！