三栏布局----方法总结

最新推荐文章于 2024-09-10 14:15:01 发布

宿海仁太

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量211

点赞数 1

分类专栏：前端文章标签： HTML5 CSS3 三栏布局网页制作前端

本文链接：https://blog.csdn.net/weixin_40709610/article/details/79450351

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

三栏布局介绍：

三栏布局，顾名思义就是两边固定宽度，中间内容宽度岁浏览器宽度自适应。如，打开某东首页：

三栏布局方法：

方法一：浮动布局

注：浮动元素脱离了文档流，根据实际情况使用时清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    h1 {
        text-align: center;
    }
    .container {
        width: 100%;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 100%;
        background-color: red;
        float: left;
    }
    .right {
        width: 200px;
        height: 100%;
        background-color: red;
        float: right;
    }
    .main {
        height: 100%;
        margin-left: 200px;
        margin-right: 200px;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <h1>三栏布局---第一种浮动布局</h1>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

方法二：绝对定位布局

简单实用，并且主要内容可以优先加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    h1 {
        text-align: center;
    }
    .container {
        width: 100%;
        height: 200px;
        position: relative;
    }
    .left {
        width: 200px;
        height: 100%;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
    }
    .right {
        width: 200px;
        height: 100%;
        background-color: red;
        position: absolute;
        right: 0;
        top: 0;
    }
    .main {
        height: 100%;
        margin-left: 200px;
        margin-right: 200px;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <h1>三栏布局---第二种绝对定位布局</h1>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

方法三：BFC布局

注：BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。缺点：主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    h1 {
        text-align: center;
    }
    .container {
        width: 100%;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 100%;
        background-color: red;
        float: left;
    }
    .right {
        width: 200px;
        height: 100%;
        background-color: red;
        float: right;
    }
    .main {
        height: 100%;
        overflow: hidden;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <h1>三栏布局---第三种BFC（块级格式上下文）布局</h1>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

方法四：双飞翼布局

主体内容可以优先加载，HTML 代码结构稍微复杂点。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .content {
        float: left;
        width: 100%;
    }
    .main {
        height: 200px;
        margin-left: 200px;
        margin-right: 200px;
        background-color: green;
    }
    .left {
        float: left;
        height: 200px;
        width: 200px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: right;
        margin-left: -200px;
        background-color: blue;
    }
    </style>
</head>
<body>
    <h1>三栏布局---第四种双飞翼布局</h1>
    <div class="content">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

方法五：圣杯布局

和双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .container {
        margin-left: 200px;
        margin-right: 200px;
    }
    .main {
        float: left;
        width: 100%;
        height: 200px;
        background-color: red;
    }
    .left {
        float: left;
        width: 200px;
        height: 200px;
        margin-left: -100%;
        position: relative;
        left: -200px;
        background-color: blue;
    }
    .right {
        float: left;
        width: 200px;
        height: 200px;
        margin-left: -200px;
        position: relative;
        right: -200px;
        background-color: green;
    }
    </style>
</head>
<body>
    <h1>三栏布局---第五种圣杯布局</h1>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

方法六：flex布局

需要考虑浏览器的兼容性

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .container {
        display: flex;
    }
    .main {
        flex-grow: 1;
        height: 200px;
        background-color: red;
    }
    .left {
        order: -1;
        flex: 0 1 200px;
        height: 200px;
        background-color: blue;
    }
    .right {
        flex: 0 1 200px;
        height: 200px;
        background-color: green;
    }
    </style>
</head>
<body>
    <h1>三栏布局---第六种flex布局</h1>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

方法七：表格布局

缺点：无法设置栏间距

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .container {
        display: table;
        width: 100%;
    }
    .left,
    .main,
    .right {
        display: table-cell;
    }
    .left {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .main {
        background-color: blue;
    }
    .right {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    </style>
</head>
<body>
    <h1>三栏布局---第七种表格布局</h1>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

以上是我整理的关于三栏布局的方法，欢迎大家补充。提出问题。谢谢。