[圣杯布局]分析实现要点
- 三列（不一定等高）
- 改变加载顺序，优先加载中间列—（结构上:中左右，显示效果上：左中右）
- 中间列自适应，两侧列固定
中间
左侧
右侧
.wrap:after{ content:""; display: block; clear: both; } .wrap{ border:1px solid #000; padding:0 200px; min-width:200px; } .left,.center,.right{ float:left; } .left{ width:200px; min-height:200px; background-color: pink; margin-left:-100%; position: relative; left:-200px; } .right{ width:200px; min-height:200px; background-color: skyblue; margin-left:-200px; position:relative; left:200px; } .center{ width:100%; min-height:200px; background-color: yellowgreen; }
圣杯实现步骤
外框左右固定padding值，预留左侧列和右侧列的列宽
.center宽度100%，.left，.right固定宽度
结构上.center，.left，.right依次浮动在一行排列
移动.left通过margin-left:-100%；配合相对定位position:relative；left:-200px；移动至左侧列位置
移动.right通过margin-left:-200px；配合相对定位position:relative；left:200px；移动至右侧列位置
