相关参考资料：
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html
http://www.imooc.com/wenda/detail/254035
http://www.cnblogs.com/langzs/archive/2013/01/27/taobaoshuangfeiyi.html
一、圣杯布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试相对模糊的问题</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="head">head</div>
<div class="container clear-fix">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
对应的样式文件：
.head {
width: 100%;
background-color: orange;
min-height: 50px;
}
.container {
padding-left: 200px;
padding-right: 150px;
}
.main {
width: 100%;
background-color: pink;
min-height: 300px;
float: left;
}
.left {
width: 200px;
background-color: red;
min-height: 300px;
float: left;
margin-left: -100%;
position: relative;
top: 0;
left: -200px;
}
.right {
width: 150px;
background-color: #999;
min-height: 300px;
float: left ;
margin-left: -150px;
position: relative;
top: 0;
right: -150px
}
.footer {
width: 100%;
background-color: yellow;
min-height: 30px;
}
.clear-fix:before,
.clear-fix:after {
content: "";
display: table;
}
.clear-fix:after {
clear: both;
}
.clear-fix {
zoom: 1;
}
二、双飞翼布局
html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试相对模糊的问题</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="head">head</div>
<div class="container clear-fix">
<div class="main">
<div class="main-wrapper">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
css样式代码
.head {
width: 100%;
background-color: orange;
min-height: 50px;
}
.main {
width: 100%;
background-color: pink;
min-height: 300px;
float: left;
}
.main-wrapper {
margin-left: 200px;
margin-right: 150px;
}
.left {
width: 200px;
background-color: red;
min-height: 300px;
float: left;
margin-left: -100%;
}
.right {
width: 150px;
background-color: #999;
min-height: 300px;
float: left ;
margin-left: -150px;
}
.footer {
width: 100%;
background-color: yellow;
min-height: 30px;
}
.clear-fix:before,
.clear-fix:after {
content: "";
display: table;
}
.clear-fix:after {
clear: both;
}
.clear-fix {
zoom: 1;
}
时间： 2024-08-02 09:47:40