说一说三栏布局的实现方案

最新推荐文章于 2024-10-18 11:46:13 发布

城北徐公学前端

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量266

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/beijiuk/article/details/127981198

版权

三栏布局在工作中或者面试中是经常会遇到的一些常用布局，要求左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。实现方式有很多，比如：圣杯布局、双飞翼布局等等。

1.圣杯布局

三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        margin-left: 200px;
        margin-right: 200px;
    }

    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .mid {
        float: left;
        width: 100%;
        height: 200px;
        background-color: cadetblue;
    }

    .right {
        float: left;
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
</style>

<body>
    <div class="container">
        <div class="mid">midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

2.双飞翼布局

双飞翼布局的实现方案：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置`margin`,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
      overflow: hidden;
    }
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin-left: -100%;
    }
    .center{
      float: left;
      width: 100%;
      height: 200px;
    }

    .mid {
        padding-left: 200px;
        padding-right: 200px;
        height: 200px;
        background-color: cadetblue;
    }
    .right {
        float: left;
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        margin-left: -200px;
    }
</style>

<body>
    <div class="container">
        <div class="center">
              <div class="mid">mdmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

3 绝对定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
      position: relative;
    }
    .left {
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: absolute;
        left: 0;
        top: 0;
    }
    .center{
        height: 200px;
        margin-left: 200px;
        background-color: rgb(53, 59, 57);
        margin-right: 200px;
    }
    .right {
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<body>
    <div class="container">
        <div class="center">midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

4 flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
      display: flex;
    }
    .left,.right {
        height: 200px;
        width: 200px;
    }
    .center{
        height: 200px;
        order: 2;
        flex:1;
        background-color: rgb(53, 59, 57);
    }
    .left {
      background-color: aqua;
      order: 1;
    }
    .right {
        background-color: aquamarine;
        order: 3;
    }
</style>
<body>
    <div class="container">
        <div class="center">midmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmidmid</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>