标签：
给三个div设置左浮动，因为父容器设置了padding值，中间main的宽度等于芙蓉区内容的宽度，
设置左右两侧的宽度为190px;父容器padding值为200px;设置190px;是为了方便查看显示效果：
左边设置margin-left:-100%;是为了让左侧栏移动到元素最左侧，右边设置margin-left:-190px;是让其移动到最右侧；
设置position:relative;right:-200px;
是为了让右侧栏填充父元素的padding-right值空出来的位置，不要覆盖main上面在同一行位置；设置左侧栏posotion:relative;left:-200px;是为了让左侧栏填充
父元素左侧的padding-left值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .page { padding: 0 200px; /*设置父容器左右padding值为200px*/ min-width: 200px; } .main { width: 100%; height: 30px; background-color: skyblue; float: left; } .left { width: 190px; /*设置左边布局宽度为190px*/ height: 30px; background-color: blue; float: left; margin-left: -100%; position: relative; left: -200px; } .right { width: 190px; /*设置左边布局宽度为190px*/ height: 30px; background-color: pink; float: left; margin-left: -190px; position: relative; right: -200px; } /*圣杯布局*/ </style> </head> <body> <div class="page"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/lcf1314/p/5493260.html
