【三栏式布局、双飞翼布局、圣杯布局】09

最新推荐文章于 2022-10-08 11:20:56 发布

mango660

最新推荐文章于 2022-10-08 11:20:56 发布

阅读量346

点赞数

分类专栏： Web前端 CSS样式文章标签： css html 三栏式布局双飞翼布局圣杯布局

本文链接：https://blog.csdn.net/mango660/article/details/122281653

版权

Web前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

CSS样式

15 篇文章 0 订阅

订阅专栏

本文详细介绍了三种实现三栏式布局的方法：1) 使用CSS calc函数，2) 双飞翼布局，3) 圣杯布局。每种方法都涉及到了左右盒子固定宽度，中间盒子自适应的布局策略。通过设置浮動、margin负值和相对定位，实现了内容区域在不同屏幕尺寸下保持良好展示效果。这些布局技巧对于前端开发者优化网页响应式设计具有重要意义。

摘要由CSDN通过智能技术生成

三栏式布局

文章目录

- 三栏式布局

两边盒子固定宽度，中间盒子自适应的布局。

1. 用calc函数实现三栏式布局

<div class="wrap">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

.wrap{
    width: 60%;
    border: 1px solid red;
    margin: 0 auto;
    /* 清除浮动:将父元素设置为BFC盒子 */
    overflow: hidden;
}

.left{
    width: 150px;
    background-color: chartreuse;
    height: 300px;
    float: left;
}

.right{
    width: 130px;
    background-color: cornflowerblue;
    height: 300px;
    float: left;
}

.middle{
    width: calc(100% - 280px);
    height: 350px;
    background-color: rgba(170, 43, 138, 0.37);
    float: left;
}

在这里插入图片描述

2. 双飞翼布局

父元素包含左中右三个盒子，分别左浮动，中间元素宽度为100%（必须为第一个渲染）
用margin-left的赋值将两边盒子拉上去和中间盒子同行（左边-100%，右边-有盒子宽度）
给父元素清除浮动
中间元素设置子元素，并给其左右margin为左右盒子留位置

<div class="wrap">
    <div class="middle">
        <div class="child"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.wrap{
    width: 60%;
    border: 1px solid red;
    margin: 0 auto;
    /* 清除浮动:将父元素设置为BFC盒子 */
    overflow: hidden;
}

.left{
    width: 150px;
    background-color: chartreuse;
    height: 300px;
    float: left;
    margin-left: -100%;
}
.right{
    width: 130px;
    background-color: cornflowerblue;
    height: 300px;
    float: left;
    margin-left: -130px;
}
.middle{
    width: 100%;
    height: 350px;
    background-color: rgba(170, 43, 138, 0.37);
    float: left;
}

.child{
    background-color: darkblue;
    height: 100%;
    margin: 0 130px 0 150px;
}

3. 圣杯布局

父元素包含左中右三个盒子，分别左浮动，中间元素宽度为100%（必须为第一个渲染）
用margin-left的赋值将两边盒子拉上去和中间盒子同行（左边-100%，右边-有盒子宽度）
给父元素清除浮动
父元素用左右padding为左右盒子留位置并用相对定位将左右元素移动到正确的位置上。

<div class="wrap">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.wrap{
    width: 60%;
    border: 1px solid red;
    margin: 0 auto;
    /* 清除浮动:将父元素设置为BFC盒子 */
    overflow: hidden;

    padding: 0 130px 0 150px;
}

.left{
    width: 150px;
    background-color: chartreuse;
    height: 300px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -150px;
}
.right{
    width: 130px;
    background-color: cornflowerblue;
    height: 300px;
    float: left;
    margin-left: -130px;
    position: relative;
    right: -130px;
}
.middle{
    width: 100%;
    height: 350px;
    background-color: rgba(170, 43, 138, 0.37);
    float: left;
}