三栏布局的六种实现方式

最新推荐文章于 2024-02-05 14:39:35 发布

慕冬贰拾柒

最新推荐文章于 2024-02-05 14:39:35 发布

阅读量763

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/WenR_zt/article/details/128039635

版权

本文介绍了前端布局的五种常见方法：浮动布局、绝对定位、Flexbox、Grid布局以及两种经典解决方案——圣杯布局和双飞翼布局。每种方法都有其优缺点，例如浮动布局的兼容性好但需要清除浮动，而Flexbox和Grid则提供了更现代、灵活的布局解决方案。这些技术对于前端开发者来说是理解和掌握网页布局的关键。

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

1.浮动

优点：简单兼容性好

缺点：需要给父盒子清除浮动，否则父元素的高度无法撑开，导致其他页面元素混乱

<div class="container">  
    //  浮动：盒子的布局方式必须是 左 右 中
    <div class="left">左边区域</div>
    <div class="right">右边区域</div>
    <div class="center">中间区域</div>
</div>

.container{
    border: 1px solid black;
    overflow: hidden;
}
.left{
    float: left;
    border: 1px solid red;
    width: 100px;
}
.right{
    float: right;
    border: 1px solid green;
    width: 100px;
}
.center{
    margin: 0 100px;
    border: 1px solid black;
}

2.绝对定位

两边通过绝对定位定位到父盒子的左右边框上，再根据实际的需要设置两边盒子的宽度，中间内容通过定位属性左右自适应宽度

<div class="container">
    <div class="left">左边区域</div>
    <div class="center">中间区域</div>
    <div class="right">右边区域</div> 
</div>

.container{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
    width: 100px;
    border: 1px solid red;
}
.center{
    position: absolute;
    left: 100px;
    right: 100px;
    border: 1px solid #000;
}
.right{
    position: absolute;
    right: 0;
    width: 100px;
    border: 1px solid red;
}

3.flex布局

<div class="container">
    <div class="left">左边区域</div>
    <div class="center">中间区域</div>
    <div class="right">右边区域</div> 
</div>

.container{
    display: flex;
}
.left{
    width: 100px;
    border: 1px solid red;
}
.center{
    flex: 1;
    border: 1px solid #000;
}
.right{
    width: 100px;
    border: 1px solid red;
}

4.grid布局

使用grid网格布局实现三列布局，中间自适应

<div class="container">
    <div class="left">左边区域</div>
    <div class="center">中间区域</div>
    <div class="right">右边区域</div> 
</div>

.container{
    display: grid;
    grid-template-columns: 100px auto 100px;
}
.left,.center,.right{
    border: 1px solid black;
}

5.圣杯布局

三个盒子放在同一个父元素下盒子布局中左右，父盒子设置左右padding，三个盒子全部左浮动，设置中间盒子的宽度是100%，左右盒子固定；左盒子左边距设置-100%，设置相对定位，向左移动自身的宽度；右盒子移动自身的宽度，将左边距设置成-自身宽度

<div class="container">
    <div class="center">中间区域</div>
    <div class="left">左边区域</div>
    <div class="right">右边区域</div>
</div>

.container{
    border: 1px solid #000;
    overflow: hidden;
    padding: 0 100px;
}
.left{
    background-color: aqua;
    width: 100px;
    /*浮动：保证之后的margin-left属性可以将自身拉到上一行 */
    float: left;
    /*将元素向左移动属性值的单位，100%相对于父容器计算； */
    margin-left: -100%;
    /*需要将自身再向左移动自身的宽度，进入容器的padding-left区域 */
    position: relative;
    left: -100px;
}
.center{
    float: left;
    width: 100%;
    border: 1px solid #000;
}
.right{
    float: left;
    width: 100px;
    margin-left: -100px;
    position: relative;
    left: 100px;
    background-color: blueviolet;
}

6.双飞翼布局

解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开

<div class="container">
    <!-- 双飞翼布局：在内容区域的盒子外在套一个盒子 中左 右 -->
    <div class="center">
        <div class="main">中间区域</div>
    </div>
    <div class="left">左边区域</div>
    <div class="right">右边区域</div>
</div>

.container{
    border: 1px solid #000;
    /* 清除浮动解决父盒子塌陷问题 */
    overflow: hidden;
}
.left{
    width: 100px;
    /* 浮动：保证之后的 margin-left属性可以将自身拉到上一行 */
    float: left;
    /* 将元素向左移动属性值，100%是相对于父盒子 */
    margin-left: -100%;
    background-color: aqua;
}
.center{
    float: left;
    border: 1px solid red;
    width: 100%;
}
.right{
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: blanchedalmond;
}
.main{
    margin: 0 100px;
}