三栏布局——面试/笔试题

Code6E

已于 2024-03-31 20:38:51 修改

阅读量804

点赞数 31

分类专栏：面试题 CSS 文章标签： css 前端 css3 面试

于 2024-03-31 20:24:27 首次发布

本文链接：https://blog.csdn.net/qq_59200309/article/details/137206544

版权

CSS 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

面试题

4 篇文章 0 订阅

订阅专栏

本文详细介绍了使用CSS实现三栏布局的不同方法，包括flex布局、grid布局、浮动以及table布局，并对比了它们的适用场景和工作原理。

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

三栏布局(两端指定宽度，中间自适应)

只介绍简单的写法，圣杯布局之类的比较复杂，实际上越简单越好，所以复杂的就不介绍了

flex布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
        }
        .left {
            width: 200px;
            background-color: orange;
        }

        .right {
            width: 200px;
            background-color: green;
        }

        .main {
            /* 中间栏占据所有剩余空间 */
            flex: 1;
            border: 5px solid #000;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">左侧</div>
        <div class="main">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

在这里插入图片描述
2. grid布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: grid;
            grid-template-columns: 200px auto 200px;
            /* 设置列间距为5px */
            column-gap: 5px;
        }
        .left {
            background-color: orange;
        }

        .right {
            background-color: green;
        }

        .main {
            /* margin值大于左右侧栏的宽度即可 */
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">左侧</div>
        <div class="main">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

在这里插入图片描述

浮动：左侧左浮动，右侧右浮动，左侧栏和右侧栏都脱离了文档/标准流，所以中间栏会顶上去，然后设置左右的magin避免左侧和右侧的栏将中间的栏遮挡

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .outer{
            columns: 3;
        } */
        .left{
            float: left;
            width: 200px;
            background-color: orange;
        }
        .right{
            float: right;
            width: 200px;
            background-color: green;
        }
        .main{
            /* margin值大于左右侧栏的宽度即可 */
            margin-left: 210px;
            margin-right: 210px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="main">中间</div>
</body>

</html>

在这里插入图片描述
4. 浮动+BFC

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
            float: left;
            width: 200px;
            background-color: orange;
        }

        .right {
            float: right;
            width: 200px;
            background-color: green;
        }

        .main {
            /* margin值大于左右侧栏的宽度即可 */
            border: 2px solid #000;
            /* 开启BFC，中间栏会围绕浮动的盒子，而不是被其遮盖。overflow: hidden;只是开启BFC的一种方式，还可以用其他语句开启，如display: flex; */
            overflow: hidden;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="main">中间</div>
</body>
</html>

在这里插入图片描述
5. table布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: table;
            /* 注意table布局中父容器设置宽度100%，否则父容器的宽度是内容撑开的宽度 */
            width: 100%;
        }
        .left {
            display: table-cell;
            width: 200px;
            background-color: orange;
        }

        .right {
            display: table-cell;
            width: 200px;
            background-color: green;
        }

        .main {
            /* 中间栏占据所有剩余空间 */
            display: table-cell;
            border: 5px solid #000;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">左侧</div>
        <div class="main">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

父容器未设置width:100%的情况，父容器的宽度是内容撑开的宽度
在这里插入图片描述
设置后

6. 定位：左右2栏均设置绝对定位，左栏left:0;，右栏right:0;，左栏和右栏都脱离了文档/标准流，所以中间栏会顶上去，然后设置左右的magin避免左侧和右侧的栏将中间的栏遮挡

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            width: 200px;
            background-color: orange;
        }

        .right {
            position: absolute;
            right: 0;
            width: 200px;
            background-color: green;
        }

        .main {
            /* margin值大于左右侧栏的宽度即可 */
            margin: 0 205px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- <div class="container"> -->
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="main">中间</div>
    <!-- </div> -->
</body>

</html>

在这里插入图片描述

三栏布局(平均分布)

flex布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            display: flex;
        }

        .item {
            flex: 1;
            /* 或如下一行，如果没有设置换行，那么只要width的百分比大于33.33%即可，因为超出部分会平均地压缩，最后的效果还是一样的3栏均分 */
            /* width: 33.33%; */
            /* 或 */
            /* flex: 0 0 33.33%; */
            background: #eee;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="item">1/3</div>
        <div class="item">1/3</div>
        <div class="item">1/3</div>
    </div>
</body>
</html>

在这里插入图片描述
2. grid布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            display: grid;
            /* 设置3列，fr表示份数 */
            grid-template-columns: 1fr 1fr 1fr;
            gap: 5px;
        }
        .item {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="item">1/3</div>
        <div class="item">1/3</div>
        <div class="item">1/3</div>
    </div>
</body>

</html>

在这里插入图片描述
3. 浮动

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            /* 设置border-box是为了不让边框占额外的宽度，否则会把盒子挤到另一行 */
            box-sizing: border-box;
            /* 设置边框时为了能看清这是3列 */
            border: 1px solid #000;
            float: left;
            width: 33.3%;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="item">1/3</div>
    <div class="item">1/3</div>
    <div class="item">1/3</div>
</body>

</html>

在这里插入图片描述
4. 父容器设置columns:3

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            columns: 3;
        }
        .item {
            /* 这个宽度的百分比是相对于每一栏的宽度，每栏之间默认有一些间距 */
            width: 100%;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="item">1/3</div>
        <div class="item">1/3</div>
        <div class="item">1/3</div>
    </div>

</body>

</html>