三栏布局：左右固定，中间自适应

最新推荐文章于 2023-08-23 15:02:17 发布

smallsnine

最新推荐文章于 2023-08-23 15:02:17 发布

阅读量470

点赞数 1

CC 4.0 BY-SA版权

分类专栏：布局文章标签：三栏布局左右固定中间自适应 html css 布局

本文链接：https://blog.youkuaiyun.com/smallsnine/article/details/78875864

布局专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何创建一个三栏布局，其中左侧和右侧栏的宽度固定，中间栏根据屏幕大小自适应调整。内容涵盖HTML和CSS的实践应用，包括多种布局实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我综合的几种方法，亲自实践过了。第五种是三个都是自适应。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>三栏布局</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            /*第一种方法：bfc*/
            .left{
                height: 100px;
                width: 100px;
                background-color: red;
                float: left;
                margin-right: 20px;
            }
            .right{ 
                width: 100px;           
                height: 100px;
                background-color: green;
                float: right;
                margin-left: 20px;
            }
            .main{
                height: 100px;
                overflow: hidden;
                background-color: pink;
            }

            /*第二种方法:双飞翼布局*/
            /*.container{
                float: left;
                width:100%;
            }
            .main{
                height: 100px;
                margin-left: 120px;
                margin-right: 120px;
                background-color: pink;
            }
            .left{
                float: left;
                height: 100px;
                width: 100px;
                margin-left: -100%;
                background-color: red;
            }
            .right{
                float: right;
                width: 100px;
                height: 100px;
                float: right;
                margin-left: -100px;
                background-color: green;
            }
            */

            /*第三种方法：圣杯布局*/
            /*.container {
                margin: 0 120px;
            }

            .main {
                float: left;
                width: 100%;
                height: 100px;
                background-color: pink;
            }

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

            .right {
                float: left;
                width: 100px;
                height: 100px;
                margin-left: -100px;
                background-color: green;
                position: relative;
                right: -120px;
            }*/

            /*第四种:flex布局*/
            /*.container{
                display: flex;
            }
            .left{
                order: -1;
                flex: 0 1 100px;
                height: 100px;
                margin-right: 20px;
                background-color: red;
            }
            .right{
                flex: 0 1 100px;
                margin-left: 20px;
                height: 100px;
                background-color: green;
            }
            .main{
                flex-grow: 1;
                height: 100px;
                background-color: pink;
            }*/

            /*第五种:table*/
            /*.container{
                display: table;
                width: 100%;
            }
            .left{
                display: table-cell;
                height: 100px;
                margin-right: 20px;
                background-color: red;
            }
            .right{
                display: table-cell;
                margin-left: 20px;
                height: 100px;
                background-color: green;
            }
            .main{
                display: table-cell;
                height: 100px;
                background-color: pink;
            }*/

        </style>
    </head>

    <body>
        <!--第一种方案：bfc-->
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>
        <div class="main">我是中间</div>

        <!--第二种方案：双飞翼-->
        <!--<div class="container">
            <div class="main">我是中间</div>
        </div>
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>-->

        <!--第三种方法：圣杯布局-->
        <!--<div class="container">
            <div class="main">我是中间</div>
            <div class="left">我是左边</div>
            <div class="right">我是右边</div>
        </div>-->

        <!--第四种：flex-->
        <!--<div class="container">
            <div class="left">我是左边</div>
            <div class="main">我是中间</div>
            <div class="right">我是右边</div>
        </div>-->

        <!--第五种：table  缺点：无法设置栏间距-->
        <!--<div class="container">
            <div class="left">我是左边</div>
            <div class="main">我是中间</div>
            <div class="right">我是右边</div>
        </div>-->

        <!--第六种：绝对定位-->
    </body>
</html>

页面效果：
这里写图片描述