圣杯布局(float + 负margin + padding + position)
<!DOCTYPE html><html> ?<head> ???<meta charset="UTF-8" /> ???<title>圣杯</title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.main{ ???????????float: left; ???????????width: 100%; ???????????height: 500px; ???????????background:red; ???????} ???????.sub{ ???????????position: relative; ???????????float: left; ???????????left: -200px; ???????????width: 200px; ???????????height: 500px; ???????????margin-left: -100%; ???????????background:blue; ???????} ???????.extra{ ???????????position: relative; ???????????float: left; ???????????right: -180px; ???????????width: 180px; ???????????height: 500px; ???????????margin-left: -180px; ???????????background:green; ???????} ???????.content{ ???????????padding: 0 180px 0 200px; ???????} ???</style> ?</head> ?<body> ????<!-- 圣杯布局(float + 负margin + padding + position) --> ???<div class="content"> ???????<div class="main"></div> ???????<div class="sub"></div> ???????<div class="extra"></div> ???</div> ?</body></html>双飞翼布局(float + 负margin + margin)
<!DOCTYPE html><html> ?<head> ???<meta charset="UTF-8" /> ???<title></title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.content{ ???????????float: left; ???????????width: 100%; ???????????height: 500px; ???????????background:red; ???????} ???????.sub{ ???????????float: left; ???????????width: 200px; ???????????height: 500px; ???????????margin-left: -100%; ???????????background:blue; ???????} ???????.extra{ ???????????float: left; ???????????width: 180px; ???????????height: 500px; ???????????margin-left: -180px; ???????????background:green; ???????} ???????.main{ ???????????margin: 0 180px 0 200px; ???????} ???</style> ?</head> ?<body> ???<!-- ?双飞翼布局(float + 负margin + margin) --> ???<div class="content"> ???????<div class="main"></div> ???</div> ???<div class="sub"></div> ???<div class="extra"></div> ?</body></html>flex布局
<!DOCTYPE html><html> ?<head> ???<meta charset="UTF-8" /> ???<title></title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.content{ ???????????display: flex; ???????} ???????.sub{ ???????????width: 200px; ???????????height: 500px; ???????????background:blue; ???????} ???????.main{ ???????????flex:1; ???????????height: 500px; ???????????background:red; ???????} ???????.extra{ ???????????width: 180px; ???????????height: 500px; ???????????background:green; ???????} ???</style> ?</head> ?<body> ???<!-- ?flex布局 --> ???<div class="content"> ???????<div class="sub"></div> ???????<div class="main"></div> ???????<div class="extra"></div> ???</div> ?</body></html>一样效果，不一样的布局。如下：
CSS布局（圣杯、双飞翼、flex）
原文地址：http://www.cnblogs.com/zhang-wang/p/7472699.html