使用CSS实现三列布局（左右固定宽度，中间自适应）六种方法

最新推荐文章于 2022-05-05 19:48:26 发布

Lee 酱

最新推荐文章于 2022-05-05 19:48:26 发布

阅读量1.7k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/Lee_taotao/article/details/90753577

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、利用左右浮动，脱离文档流，中间元素正常，设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后)

如果窗口太小，右边元素会被挤到下一行

<head>
<style>
    .box{
        height: 200px;
        padding: 0 200px 0 100px;
    }
    .left{
        width: 100px;
        float: left;
        margin-left: -100px;
        background: red;
    }
    .right{
        width: 200px;
        float: right;
        margin-right: -200px;
        background: green;
    }
    .middle{
        width: 100%;
        float: right;
        background: blue;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中间</div>
   </div>
</body>

2、圣杯布局(注意：标签顺序：自适应的放前面，固定的放后面)

<head>
<style>
    .box{
        height: 200px;
        padding: 0 200px 0 100px;
    }
    .left{
        width: 100px;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -100px;
        background: red;
    }
    .right{
        width: 200px;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -200px;
        background: green;
    }
    .middle{
        width: 100%;
        float: left;
        background: blue;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="middle">中间</div>
        <div class="left">左</div>
        <div class="right">右</div>
   </div>
</body>

3、双飞翼布局（与圣杯布局的区别：自适应部分content又被包裹了一次，样式也从最外层box中的padding变成content中的margin，注意：中间的自适应会占左右位置）

<head>
<style>
    .box{
        height: 200px;
    }
    .left{
        width: 100px;
        float: left;
        margin-left: -100%;
        background: red;
    }
    .right{
        width: 200px;
        float: left;
        margin-left: -200px;
        background: green;
    }
    .middle{
        width: 100%;
        float: left;
        background: blue;
    }
    .content{
        margin: 0 200px 0 100px;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="middle">
            <div class="content">中间</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
   </div>
</body>

4、利用绝对定位

<head>
<style>
    .box{
        height: 200px;
        width: 100%;
        position: relative;
    }
    .left{
        width: 100px;
        position: absolute;
        top: 0px;
        left: 0px;
        background: red;
    }
    .right{
        width: 200px;
        position: absolute;
        top: 0px;
        right: 0px;
        background: green;
    }
    .middle{
        margin: 0 200px 0 100px;
        background: blue;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中间</div>
   </div>
</body>

5、使用flex布局（ flex 是 flex-grow、flex-shrink、flex-basis的缩写 flex:1 等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0%;）

<head>
<style>
    .box{
        display: flex;
        flex-direction: row;
    
    }
    .left{
        width: 100px;
        background: red;
    }
    .right{
        width: 200px;
        background: green;
    }
    .middle{
        background: blue;
        flex: 1;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="left">左</div>
        <div class="middle">中间</div>
        <div class="right">右</div>
   </div>
</body>

6、利用calc()动态计算中间的值

<head>
<style>
    .box{
        height: 200px;
    }
    .left{
        width: 100px;
        float: left;
        background: red;
    }
    .right{
        width: 200px;
        float: left;
        background: green;
    }
    .middle{
        width: calc(100% - 300px);
        float: left;
        background: blue;
    }
</style>
</head>
<body>
   <div class="box">
        <div class="left">左</div>
        <div class="middle">中间</div>
        <div class="right">右</div>
   </div>
</body>

Lee 酱

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用CSS实现三列布局（左右固定宽度，中间自适应）六种方法

1、利用左右浮动，脱离文档流，中间元素正常，设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后)如果窗口太小，右边元素会被挤到下一行<head><style> .box{ height: 200px; padding: 0 200px 0 100px; } .l...
复制链接

扫一扫

专栏目录