css 左右固定中间自适应

最新推荐文章于 2025-08-05 18:26:43 发布

前端-小鑫

最新推荐文章于 2025-08-05 18:26:43 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/weixin_43876728/article/details/119280581

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍五种网页布局方法：浮动、绝对定位、弹性布局、表格布局及网格布局，并提供具体实现代码示例。

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

浮动写法：

<div class="box_float">
    <style type="text/css">
        .box_float {
            min-height: 100px;
        }
        .left {
            float: left;
            background: black;
            width: 300px;
        }
        .middle {
            background: yellow;
        }
        .right {
            float: right;
            width: 300px;
            background: black;
        }
    </style>
        <div class="right">右边</div>
        <div class="left">左边</div>
        <div class="middle">中间</div>
</div>

绝对定位写法:

<style type="text/css">
    .box_absolute {
        min-height: 100px;
    }
    .left {
        position: absolute;
        background: black;
        width: 300px;
        left: 0;
        top: 0;
    }
    .right {
        position: absolute;
        background: black;
        width: 300px;
        right: 0;
        top: 0;
    }
    .middle {
        background: yellow;
    }
    </style>
    <div class="box_absolute">
        <div class="left">左边</div>
        <div class="middle">中间</div>
        <div class="right">右边</div>
    </div>

弹性布局写法：

<style type="text/css">
    .box_flex {
        min-height: 100px;
        display: flex;
        flex-wrap: wrap;
    }
    .middle {
        background: yellow;
        flex: 1;
    }
    .left,.right {
        background: black;
        width: 300px;
    }
</style>
<div class="box_flex">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>

表格布局写法:

<style type="text/css">
    .box_table {
        width: 100%;
        min-height: 100px;
        display: table;
    }
    .box_table>div {
        display: table-cell;
    }
    .middle {
        background: yellow;
    }
    .left,.right {
        background: black;
        width: 300px;
    }
</style>
<div class="box_table">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>

网格布局写法：

<style type="text/css">
    .box_table {
        width: 100%;
        display: grid;
         grid-template-rows: 100px;
         grid-template-columns:300px auto 300px;
    }
    .middle {
        background: yellow;
    }
    .left,.right {
        background: black;
    }
</style>
<div class="box_table">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>