前面的话
常常听说圣杯布局和双飞翼布局，以为是两个很高级的语汇。但实际上，他们只是三栏式布局的两种布局方法而已。本文将介绍三栏式布局的3种思路
思路一: float
【1】圣杯布局
圣杯布局使用float、负margin和relative，不需要添加额外标签。.main元素设置padding，为两侧定宽元素留出位置。内容元素设置100%宽度，占据中间位置。而两侧定宽元素通过设置负margin和relative的偏移属性配合，到达相应位置
缺点: 并没有实现等高布局；使用了相对定位，扩展性不好
body,p{margin: 0;}.top,.bottom{ height: 30px;}.middle{ padding: 0 120px; overflow: hidden;}.main{ width: 100%; float: left;}.left,.right{ float: left; width: 100px; position: relative;}.left{ margin-left: -100%; left: -120px;}.right{ margin-left: -100px; right: -120px;}
top
查看更多关于三栏式布局(所谓的圣杯和双飞翼)_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112100