三列布局（左右固定，中间自适应）

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

转载最新推荐文章于 2023-08-23 15:02:17 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017166176

本文详细介绍了五种常用的网页布局方法：定位布局、浮动布局、圣杯布局、双飞翼布局及Flex布局，每种方法均附有示例代码，帮助读者理解不同布局方式的特点与适用场景。

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

1、定位

<div class="left">我是左边，我是固定的</div>
<div class="middle">我是中间，我是自适应的，左边右边都position固定了，他们脱离了文档流，我终于得到机会挤进中间啦！只要我margin一下就没人会挡住我啦！我可真是个小机灵鬼(同时，我还是个自由人，我div写在开头中间结尾都可以呢)</div>
<div class="right">我是右边，我也是固定的</div>

<style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
        .left, .right{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 0;
        }
        .left{
            left: 0;        
        }
        .right{
            right: 0;
        }
        .middle{
            height: 200px;
            background:#efbdbd; 
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>

图片描述

2、浮动

<div class="left">我是左边，我是固定的</div>
<div class="right">我是右边，我也是固定的</div>
<div class="middle">我是中间，我是自适应的，左右浮动脱离了文档流，我才挤进来呢，margin一下也不会被挡住啦（这里我div必须在左右的后面，因为我在前面的话，他们会浮在我后面的哟）</div>

.left, .right{
            width: 200px;
            height: 200px;
            background: red;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .middle{
            height: 200px;
            background:#efbdbd; 
            margin-left: 200px;
            margin-right: 200px;
        }

图片描述

3、圣杯布局

<div class="content">
    <div class="middle">我是中间，我是自适应的
        <p>
            1、左中右float：left；顺便position：relative后面会用到<br>
            2、中间width：100%；<br>
            3、这时，中间元素会把两边撑开，那么我们用margin-left把他拉回来；<br>
            4、两边元素倒是回来了，中间被盖住了怎么办？不着急，整个外层加个padding；<br>
            5、解决了上一个问题，左右元素又偏了！还记得刚开始的定位吗？对！对左右元素定位就好啦！
        </p>(我div必须在第一位)
    </div>
    <div class="left">我是左边，我是固定的</div>    
    <div class="right">我是右边，我也是固定的</div>
</div>

<style type="text/css">

    .middle, .left, .right{
        float: left;
        height: 200px;
        position: relative;
    }
    .middle{
        width: 100%;
        background:#efbdbd; 
    }
    .content{
        padding:0 200px;
    }
    .left{
        width:200px;
        background:red;
        margin-left: -100%;
        left: -200px;
    }
    .right{
        background:red;
        width:200px;  
        margin-left: -200px;
        right: -200px;
    }
    
    </style>

图片描述

4、双飞翼布局

<div class="middle">
        <div class="middle_son">我是中间，我是自适应的
            <p>
                1、左中右float：left；<br>
                2、中间width：100%；<br>
                3、这时，中间元素会把两边撑开，那么我们用margin-left把他拉回来；<br>
                4、两边元素倒是回来了，中间被盖住了怎么办？这次我们不在整个外层加个padding了；我们在middle里面加个子标签并margin<br>
                5、可以啦！
            </p>(我div必须在第一位)
        </div>
    </div>
    <div class="left">我是左边，我是固定的</div>    
    <div class="right">我是右边，我也是固定的</div>

<style type="text/css">

    .middle, .left, .right{
        float: left;
        height: 200px;
    }
    .middle{
        width: 100%;
        background:#efbdbd; 
        
    }
    .middle_son{
        margin:0 200px;
        
    }
    .left{
        width:200px;
        background:red;
        margin-left: -100%;
    }
    .right{
        background:red;
        width:200px;  
        margin-left: -200px;
    }
    
    </style>

图片描述

5、flex

<div class="content">
    <div class="left">我是左边，我是固定的</div>
    <div class="middle">我是中间，我是自适应的，利用css3的新属性fles，弹性布局，父元素设置display:flex,中间div设置flex；1；</div>
    <div class="right">我是右边，我也是固定的</div>
</div>

<style type="text/css">
        .content{
            display: flex;
        }
        .left, .right{
            width: 200px;
            height: 200px;
            background: red;
        }
        
        .middle{
            height: 200px;
            background:#efbdbd; 
            flex: 1;
        }
    </style>

图片描述

如果想要做两列布局（左边固定，右边自适应），全部可以参考这个，唯一有一种方法自己的方法利用BFC也很简单。
圣杯布局和双飞翼布局是参考了这位同学的，可以说是照搬来的。
https://www.cnblogs.com/imwtr...