圣杯布局和双飞翼布局

2017-10-17 本文已影响0人扶搏森

目的

中间栏div内容不被遮挡

圣杯布局

为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="middle">
            中
        </div>
        <div class="left">
            左
        </div>
        <div class="right">右</div>
    </div>
</body>
</html>

css代码

*{
    margin:0;
    padding:0;
}
div{
    height:150px;
}
.left{
    background: orange;
    float:left;
    width: 300px;
    <!--让左模块跑到左边来-->
    margin-left:-100%;
}
.right{
    float:left;
    background: blue;
    width: 200px;
    <!--让右模块跑到右边来-->
    margin-left:-200px;
}
.middle{
    background: yellow;
    float:left;
    width: 100%;
}
.middle .inner{
    /*margin-left:300px;*/
}
.container{
    padding-left:300px;
    padding-right:200px;
}

开始效果

alt 开始效果

优化css实现圣杯布局

*{
    margin:0;
    padding:0;
}

div{
    height:150px;
}
.left{
    background: orange;
    float:left;
    width: 300px;
    margin-left:-100%;
    <!--relative,相对自己 left:-300px,向左移动300px-->
    position:relative;
    left:-300px;
}
.right{
    float:left;
    background: blue;
    width: 200px;
    margin-left:-200px;
    <!--relative,相对自己,left:200px,是与左边多出200px-->
    position:relative;
    left:200px;
}
.middle{
    background: yellow;
    float:left;
    width: 100%;
}
.middle .inner{
    /*margin-left:300px;*/
}
.container{
    padding-left:300px;
    padding-right:200px;
}

中间效果

[图片上传失败...(image-9035fd-1580932123057)]

*{
    margin:0;
    padding:0;
}
div{
    /*height:300px;*/
}
.left{
    float:left;
    width: 300px;
    background:orange;
    margin-left:-100%;
    position: relative;
    left:-300px;
}
.right{
    float:right;
    background:red;
    width: 200px;
    margin-left:-200px;
    position: relative;
    left:200px;
}
.middle{
    float: left;
    width: 100%;
    background: blue;
}
.left,.right,.middle{
    padding-bottom:9999px;
    margin-bottom: -9999px;
}
.container{
    padding-left:300px;
    padding-right:200px;
    overflow: hidden;
}

最终效果

[图片上传失败...(image-bd1c9a-1580932123057)]

双飞翼布局

为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

html

<div class="container">
    <div class="middle">
        <div class="inner">
            中
        </div>
    </div>
    <div class="left">
        左
        <div>
            第二行
        </div>
    </div>
    <div class="right">右</div>
</div>

css

*{
    margin:0;
    padding:0;
}
div{
    /*height:300px;*/
}
.left{
    float:left;
    width: 300px;
    background:orange;
    margin-left:-100%;
}
.right{
    float:right;
    background:blue;
    width: 200px;
    margin-left:-200px;
}
.middle{
    float: left;
    width: 100%;
    background: yellow;
}
.middle .inner{
    margin-left:300px;
}
.left,.right,.middle{
    padding-bottom:9999px;
    margin-bottom: -9999px;
}
.container{
    /*padding-left:300px;
    padding-right:200px;
    overflow: hidden;*/
    overflow: hidden;
}

双飞翼效果

[图片上传失败...(image-186570-1580932123057)]