css 左右宽固定，中间自适应——双飞翼布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了css 左右宽固定，中间自适应——双飞翼布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

首先我们有三个盒子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是被挤下去 css 左右宽固定，中间自适应——双飞翼布局,CSS,css,前端,经验分享

我们通过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;
        }