【Bootstrap】双飞翼布局（圣杯布局）

最新推荐文章于 2024-09-10 18:37:52 发布

山有扶苏..

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量149

点赞数

文章标签： bootstrap css html

本文链接：https://blog.csdn.net/luobifeiyeshi0/article/details/130392850

版权

本文介绍了使用Bootstrap来实现双飞翼布局，即三栏布局，其中左右两栏宽度自适应，中间栏保持固定宽度。文章详细讲解了通过弹性布局（flex布局）、浮动和定位三种方法来达成这一目标。

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

文章目录

前言
方法

前言

双飞翼布局（圣杯布局）是一种常用的三栏布局，它可以实现左右两栏宽度自适应，而中间栏固定宽度的效果。

方法

1.弹性布局（flex布局）

<head>
    <style>
        * {
     
            padding: 0;
            margin: 0;
        }
        header {
     
            display: flex;
        }
        aside {
     
            width: 200px;
            height: 100vh;
            background-color: aqua;
        }
        nav {
     
            flex: 1;
            height: 100vh;
            background-color: antiquewhite;
        }
        section {
     
            width: 200px;
            height: 100vh;
            background-color: aqua;
        }
    </style>