左右定宽，中间自适应，实现三列布局

关注

原创最新推荐文章于 2026-03-17 01:11:13 发布 587 阅读 AI 写同款· GEO 优化 ›

【YOLO 系列】基于YOLO V8的智能车载交通标志识别系统【python源码+Pyqt5界面+数据集+训练代码】本文详细介绍了基于YOLO V8构建智能车载交通标志识别系统的完整流程。从环境搭建、数据集准备、模型训练到PyQt5图形界面开发，提供了Python源码和实战代码，帮助开发者快速实现高精度、实时的交通标志检测应用，提升驾驶辅助系统的开发效率。阅读详情

左右定宽，中间自适应，实现三列布局

今天想说的是一个左右定宽，中间自适应，实现三列布局，我也总结了以下，主要有以下几种：
废话不多说，直接上代码：

第一种：float

<!--html-->
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="middle"><span>middle</span></div>

//css
#left{
    float: left;
    background-color: red;
    width: 150px;
    height: 50px;
}
#right {
    float: right;
    background-color: yellow;
    width: 200px;
    height: 50px;
}
#middle {
    margin: 0 200px 0 150px;
    width: 100%;
    background-color: #fff9ca;
    height: 50px;
}

第二种：BFC

<!--html-->
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="middle"><span>middle</span></div>

//css
#left {
    background-color: red;
    width: 150px;
    height: 50px;
    float: left;
}
#right {
    background-color: yellow;
    width: 200px;
    height: 50px;
    float: right;
}
#middle {
    background-color: #fff9ca;
    height: 50px;
    overflow: hidden;
}

第三种：双飞翼布局

<!--html-->
<div class="grid">
    <div id="middle">
        <div id="middle-span"><span>middle</span></div>
    </div>
    <div id="left"><span>left</span></div>
    <div id="right"><span>right</span></div>
</div>

//css
#middle {
    float: left;
    background-color: #fff9ca;
    width: 100%;
    height: 50px;
}

#middle-span {
    margin: 0 200px 0 150px;
}

#left {
    float: left;
    position: relative;
    background-color: red;
    width: 150px;
    margin-left: -100%;
    height: 50px;

}

#right {
    float: left;
    position: relative;
    background-color: yellow;
    width: 200px;
    margin-left: -200px;
    height: 50px;
}

第四种：flex

<!--html-->
<div class="flex">
    <div id="left"><span>left</span></div>
    <div id="middle"><span>middle</span></div>
    <div id="right"><span>right</span></div>
</div>

//css
        .flex {
            display: flex;
            flex-flow: row;
        }

        #left {
            background-color: red;
            width: 150px;
            height: 50px;
        }

        #middle {
            background-color: #fff9ca;
            flex: 1; /* flex中宽度自适应使用该属性，使用100%时其他列的固定宽度会出现问题*/
            height: 50px;
        }

        #right {
            background-color: yellow;
            width: 200px;
            height: 50px;
        }