五种方法实现三栏布局（左右固定中间自适应）

最新推荐文章于 2023-08-30 16:07:08 发布

程序媛啊啊啊

最新推荐文章于 2023-08-30 16:07:08 发布

阅读量894

点赞数 2

分类专栏： html 前端css 文章标签： html 布局 css 自适应

本文链接：https://blog.csdn.net/weixin_44379204/article/details/106671585

版权

前端css 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

一、Float布局

布局分析:

布局方案	实现	优点	缺点
Float布局	左右中三列，左列左浮动，右列右浮动，中间列设置左右margin	比较简单，兼容性也比较好	浮动元素脱离文档流，使用的时候只需要注意一定要清除浮动。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="left">Left</div>
        <!-- 右栏部分要写在中间内容之前 -->
        <div class="right">Right</div>
        <div class="main">Main</div>
    </div>
</body>
</html>
<style>
    body,
    html,
    .container {
        height: 100%;
        padding: 0;
        margin: 0;
    }

    /*左边栏左浮动*/
    .left {
        float: left;
        height: 100%;
        width: 200px;
        background: pink;
    }

    /*中间栏自适应*/
    .main {
        height: 100%;
        margin: 0 200px;
        background: skyblue;
    }

    /*右边栏右浮动*/
    .right {
        float: right;
        height: 100%;
        width: 200px;
        background: pink;
    }
</style>

二、Position布局

布局分析:

布局方案	实现	优点	缺点
Position布局	左中右三列（无顺序），根据定位属性去直接设置各个子元素位置	快捷，设置很方便	元素脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，有效性和可使用性比较差

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>
</html>
<style>
    body,
    html,
    .container {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    /*左右进行绝对定位*/
    .left,
    .right {
        position: absolute;
        height: 100%;
        top: 0;
        background: pink;
    }

    .left {
        left: 0;
        width: 200px;
    }

    .right {
        right: 0;
        width: 200px;
    }

    /*中间用margin空出左右元素所占的空间*/
    .main {
        height: 100%;
        margin: 0 200px;
        background: skyblue;
    }

    /*或者中间也进行绝对定位*/
    /* .main {
        position: absolute;
        height: 100%;
        left: 200px;
        right: 200px;
        background: skyblue;
    } */
</style>

三、Table布局

布局分析:

布局方案	实现	优点	缺点
Table布局	左中右三列，父元素display: table;子元素display: table-cell;居中子元素不设宽度	使用起来方便,兼容性也不存在问题	①无法设置栏边距；②对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>
</html>
<style>
    body,
    html {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .container {
        display: table;
        width: 100%;
    }

    .container>div {
        display: table-cell;
    }

    .left {
        width: 200px;
        background: pink;
        height: 400px;
    }

    .main {
        background: skyblue;
    }

    .right {
        width: 200px;
        background: pink;
    }
</style>

四、Flex布局

布局分析:

布局方案	实现	优点	缺点
Flex布局	左中右三列，父元素display: flex;两侧元素设宽；居中子元素flex: 1;	比较完美	存在IE上兼容性问题，只能支持到IE9以上

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>
</html>
<style>
    body,
    html {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .container {
        display: flex;
        height: 100%;
    }

    .left {
        width: 200px;
        background: pink;
    }

    .main {
        flex: 1;
        background: skyblue;
    }

    .right {
        width: 200px;
        background: pink;
    }
</style>

五、Grid布局

布局分析:

布局方案	实现	优点	缺点
Grid布局	左中右三列，父元素display: grid;利用网格实现	最强大和最简单	兼容性不好，IE10+上支持，而且也仅支持部分属性

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>
</html>
<style>
    body,
    html {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .container {
        display: grid;
        width: 100%;
        /*设置行高*/
        grid-template-rows: 100px;
		/*设置列数属性*/
        grid-template-columns: 200px auto 200px;
    }

    .left {
        background: pink;
    }

    .main {
        background: skyblue;
    }

    .right {
        background: pink;
    }
</style>

程序媛啊啊啊

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
五种方法实现三栏布局（左右固定中间自适应）

一、Float布局布局分析:布局方案实现优点缺点Float布局左右中三列，左列左浮动，右列右浮动，中间列设置左右margin比较简单，兼容性也比较好浮动元素脱离文档流，使用的时候只需要注意一定要清除浮动。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w
复制链接

扫一扫