CSS圣杯布局和双飞翼布局

最新推荐文章于 2022-07-04 23:13:06 发布

weixin_33690963

最新推荐文章于 2022-07-04 23:13:06 发布

阅读量211

点赞数

原文链接：https://yq.aliyun.com/articles/637228

版权

本文介绍网页布局中的两种经典方法：圣杯布局与双飞翼布局。这两种方法均可实现左右固定宽度、中间自适应宽度的三栏布局。圣杯布局通过父元素padding和子元素float、position实现，而双飞翼布局则利用子元素的margin进行布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、圣杯布局

圣杯布局简介：

圣杯布局将页面分为 左中右 三部分，中间部分的宽度可以随着浏览器宽度的变化而变化，左右两边部分定宽，不会变化。
圣杯布局实现起来很简单，主要是用到了 float、position、margin-left 等属性。

圣杯布局HTML代码：

<div id="content">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

圣杯布局CSS代码：

#content{
    background-color: #fff;
    height: 60px;
    padding: 0 190px 0 150px;
}
.left{
    width: 150px;
    height: 100%;
    background-color: red;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -150px;
}
.middle{
    width: 100%;
    height: 100%;
    background-color: green;
    float: left;
}
.right{
    width: 190px;
    height: 100%;
    background-color: yellow;
    float: left;
    margin-left: -190px;
    position: relative;
    right: -190px;
}

一、双飞翼布局

双飞翼布局简介：

双飞翼布局和圣杯布局很相似，但是在实现上有略微的差别。圣杯布局采用父元素的padding设置中间元素不被遮挡；双飞翼布局采用子元素的margin设置中间元素不被遮挡。
双飞翼布局的特点：中间栏中的内容可以有点渲染出来。

双飞翼布局HTML代码：

<div class="content">
    <div class="middle">
        <div class="middle-content">middle-content</div>
    </div>
    
    <div class="left">left</div>
    
    <div class="right">right</div>
</div>

双飞翼布局CSS代码：

.content{
    width: 100%;
    height: 56px;
    background-color: #333333;
}
.middle{
    width: 100%;
    height: 100%;
    float: left;
    background-color: #333;
}
.left{
    width: 200px;
    height: 100%;
    float: left;
    background-color: yellow;
    margin-left: -100%;
}
.right{
    width: 150px;
    height: 100%;
    float: left;
    background-color: red;
    margin-left: -150px;
}
.middle .middle-content{
    /*width: 100%;        注意这里不要设置width: 100%,否则右边会溢出，排版混乱*/
    height: 100%;
    background-color: green;
    margin: 0 150px 0 200px;
}