三列圣杯布局和双飞翼布局

时间：2015-08-18 11:42:53 阅读：134 评论：0 收藏：0 [点我收藏+]

标签：

相关参考资料：

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;
}

三列圣杯布局和双飞翼布局

标签：

原文地址：http://www.cnblogs.com/bobodeboke/p/4738768.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行