圣杯模型：
圣杯模型的核心在于父元素加padding。通过margin-left或者margin-right以及positive：relative定位左右两边元素；
以下左右元素的定位有两种写法，均写在注释里面
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
height:200px;
background: red;
color:white;
word-break:break-all;word-wrap:break-word；
/*为了防止单词和字符串过长，导致元素溢出而添加的css*/
}
#left {
width: 200px; /* LC width */
right: 200px;
/* LC width */
margin-left: -100%;
/* margin-left: calc(-100% - 200px);*/ /*可以取代上两行，效果一样*/
height:200px;
background: yellow;
color:green;
word-break:break-all;word-wrap:break-word
}
#right {
width: 150px;
/* RC width */
/* margin-left: -150px;
right:-150px; */ /*这是另一种写法和 margin-right: -150px;效果一样*/
margin-right: -150px;
/* RC width */
height:200px;
background:black;
color:white;
word-break:break-all;word-wrap:break-word
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="center" class="column">2222222222222222222222222222222222
2222222222222 222222222222222 222222 2222222222222222222222222222222222222222
222222 222222222222222 222222222222222222222222222222222222222222
2222222222 222222222222222 222222</div>
<div id="left" class="column">111111111111111111111111111111111
11111111111111222222222222222222222222222222
22222222222222222 222222222222222 222222 2222222222222222222222222222222222222222222222 222222222222222 2222222222222222222222222222222222222222222222222222 222222222222222 222222</div>
<div id="right" class="column">aaaaasdgsadgsdfgasdgadsfgsdfgf22222222
222222222222222222222222222222222222222 2222222
22222222 222222 2222222222222222222222222222222
2222222222
22222 222222222222222 22222222222222222222222222222222222222222222
22222222 222222222222222 222222</div>
</div>
<div id="footer"></div>
</body>
</html>
淘宝双飞翼模型在于：给最先加载的main元素外面加一个包裹元素，
里面的子元素加上左右元素相对应的margin-left和margin-right；
再移动左右元素位置：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.main {
float: left;
width: 100%;
background:red;
} .sub {
float: left;
width: 190px;
margin-left: -100%;
height:200px;
background:green;
} .extra {
float: left;
width: 230px;
margin-left: -230px;
height:200px;
background:pink;
}
#main-wrap { margin: 0 230px 0 190px; height:200px; }
</style>
</head>
<body>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main"><div id="main-wrap">#main</div></div>
<div class="sub">2222222222</div>
<div class="extra">111111111</div>
</div>
<div id="ft"></div>
</div>
</body>
</html>
网友评论