css 左右宽固定，中间自适应——双飞翼布局_css 两端设置固定宽度,中间设置宽度100%-优快云博客

本文链接：https://blog.youkuaiyun.com/Liberty_yes/article/details/132654040

文章讲述了在面试中遇到的问题，如何使用CSS实现左右宽度固定的布局，重点介绍了双飞翼布局方法，通过浮动和margin-left属性调整元素位置以达到自适应效果。

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

最近面试的时候遇到一个提问说，如何做到一个左右宽度固定，中间自适应的布局，我的答案不重要，重要的是不是面试官想听到的答案，这样问大概率他想听到的答案一定是双飞翼布局，所以今天就手敲一个双飞翼布局让大家搞明白。

首先我们有三个盒子div，分别是center、left、right

<div class="container">
    <div class="center">中间</div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>

然后我们给三个div设置宽高和背景色，方便我们看,中间要自适应，所以宽度为100%

        .center {
            background-color: pink;
            width: 100%;
            height: 100vh;
        }

        .left {
            background-color: red;
            width: 200px;
            height: 100vh;
        }

        .right {
            background-color: blue;
            width: 200px;
            height: 100vh;
        }

我们为了让三个div在同一行，所以设置container下的三个div都浮动布局

		.container div{
            float: left;
        }

此时效果是这样的，左右两个div是被挤下去在这里插入图片描述

我们通过margin-left值把左右两个div给定位到一行，左边-100%，右边div宽度是多少，就负的多少px

        .left {
            background-color: red;
            width: 200px;
            height: 10vh;
            margin-left: -100%;
        }

        .right {
            background-color: blue;
            width: 200px;
            height: 10vh;
            margin-left: -200px;
        }