<span ></span>圣<pre class="brush:html;toolbar:false"><br/></pre>杯布局

《圣杯布局》：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>圣杯布局</title>

<style type="text/css">

* { margin: 0; padding: 0; }

.left, .middle, .right { position: relative; float: left; min-height: 130px;}

.container { padding: 0 220px 0 200px; overflow: hidden; }

.left { margin-left: -100%; left: -200px; width: 200px; background: red; }

.right { margin-left: -220px; right: -220px; width: 220px; background: green; }

.middle { width: 100%; background: blue; word-break: break-all; }

</style>

</head>

<body>

<div class="container">

<div class="middle">中间</div>

<div class="left">左面</div>

<div class="right">右面</div>

</div>

</body>

</html>