圣杯VS双飞翼
双飞翼：
<!DOCTYPE html>
<html>
<head>
<title>推荐封面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{margin: 0;padding: 0}
/*非主要代码，用于测试*/
#header,#footer{background: #fffebb;}
#left,#right{background: #d6e7d3;}
#center{background: #f5f5f5;}
body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#center {
float: left;
width: 100%;
}
#center .wrap{margin: 0 150px 0 200px;}
#left {
float: left;
width: 200px;
margin-left: -100%;
}
#right {
float: left;
width: 150px;
margin-left: -150px;
}
#footer{clear: both;}
/*设置3列等高*/
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="center" class="column">
<div class="wrap">main</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript">var tt,df,df;var a =1;</script>
圣杯：
<!DOCTYPE html>
<html>
<head>
<title>推荐封面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{margin: 0;padding: 0}
/*非主要代码，用于测试*/
#header,#footer{background: #fffebb;}
#left,#right{background: #d6e7d3;}
#center{background: #f5f5f5;}
body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column{
float: left;
position: relative;
}
#center {
width: 100%;
padding: 10px 20px;/*如果中间区设置padding，宽度变宽了，left定位的right值也要增加左右padding那么多*/
}
#left {
width: 200px;
margin-left: -100%;
right: 240px;/*Lwidth:200 centerPadding:20 right:200+20*2 */
}
#right {
width: 150px;
margin-right: -190px;/*Rwidth:150 centerPadding:20 right:150+20*2 */
}
#footer{clear: both;}
/*** IE Fix ***/
* html #left {
left: 110px;/* RC fullwidth 150-20*2 */
}
/*设置3列等高*/
#container {
overflow: hidden;
zoom:1;
position: relative;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}
</style>
</head>
<body>
<!--圣杯html-->
<div id="header">header</div>
<div id="container">
<div id="center" class="column">main dsaldf s;kf s;dkf a; <span style="background:red;height:100px;width:100px;display:inline-block;">sdfklsd</span> l ald adlkla asdlk alkfa sda alsdkfa lsd asldfalsd falsdkf alsd fak sdllkf dsaldf s;kf s;dkf a; sdfklsd l ald adlkla asdlk alkfa sda alsdkfa lsd asldfalsd falsdkf alsd fak sdllkf </div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript">var tt,df,df;var a =1;</script>
