css关于实现双飞翼布局的多种方法

ゝ一纸荒年。 2023-06-24 09:27 21阅读 0赞

#### 第一种方法（浮动之后采用margin负边距） ####

首先给大家讲解一下思路，然后大家可以按照下边给出的代码试着运行一下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5eDE5OTcxMDI2_size_16_color_FFFFFF_t_70]  
上边中间那块就是双飞翼布局，左右两边固定，中间自适应，在布局的时候需要注意一点。要先**将middle这一块内容先书写**，在它渲染完之后在书写left和right。  
这样出来的结果就是left和right都跑到了middle的下边，接下来就是最重要的了，我们要想让这两块乖乖的跑到他们该去的地方，需要使用margin-left，让left左外边距向左偏移整行的宽度（100%）；让right的左外边距向左偏移right自身的宽度。这样效果就可以实现了

<body>
        <section class="top"></section>
        <section class="content clearfix">
            <div class="middle">hello world</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </section>
        <section class="bottom"></section>
    </body>
      <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .clearfix::after {
                content: "";
                height: 0;
                line-height: 0;
                display: block;
                clear: both;
                visibility: hidden;
            }
    
            .top {
                height: 100px;
                background-color: #0af;
            }
    
            .content {
                height: 300px;
                background-color: #cfa;
            }
    
            .middle {
                width: 100%;
                float: left;
                height: 100%;
                background-color: pink;
                padding: 0px 200px;
                box-sizing: border-box;
            }
    
            .left {
                float: left;
                margin-left: -100%;
                width: 200px;
                height: 100%;
                background-color: orange;
            }
    
            .right {
                float: left;
                margin-left: -200px;
                width: 200px;
                height: 100%;
                background-color: orange;
            }
    
            .bottom {
                height: 100px;
                background-color: gray;
            }
        </style>

#### 第二种方法（flex布局） ####

将包含他们三个的父容器设置为display:flex，对于他们三个设置他们各自的缩放或者放大比例，以及占据的固定宽度（flex-basis）  
flex属性是flex-grow, flex-shrink 和 flex-basis的简写.  
注意：用felx布局就无须为中间的middle设置padding。三个块的书写顺序也改为left 、middle、right

<body>
        <section class="top"></section>
        <section class="content clearfix">
            <div class="left">left</div>
            <div class="middle">hello world</div>
            <div class="right">right</div>
        </section>
        <section class="bottom"></section>
    </body>
    
     <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .clearfix::after {
                content: "";
                height: 0;
                line-height: 0;
                display: block;
                clear: both;
                visibility: hidden;
            }
    
            .top {
                height: 100px;
                background-color: #0af;
            }
    
            .content {
                height: 300px;
                background-color: #cfa;
                display: flex;
            }
    
            .middle {
                flex-grow: 1;
                width: 100%;
                height: 100%;
                background-color: pink;
                box-sizing: border-box;
            }
    
            .left {
                flex: 0 0 200px;
                width: 200px;
                height: 100%;
                background-color: orange;
            }
    
            .right {
                flex: 0 0 200px;
                width: 200px;
                height: 100%;
                background-color: orange;
            }
    
            .bottom {
                height: 100px;
                background-color: gray;
            }
        </style>

#### 第三种方法（绝对定位） ####

这种方法相信大家都很容易理解，直接上代码

<body>
        <section class="top"></section>
        <section class="content clearfix">
            <div class="left">left</div>
            <div class="middle">hello world</div>
            <div class="right">right</div>
        </section>
        <section class="bottom"></section>
    </body>
    
    <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .clearfix::after {
                content: "";
                height: 0;
                line-height: 0;
                display: block;
                clear: both;
                visibility: hidden;
            }
    
            .top {
                height: 100px;
                background-color: #0af;
            }
    
            .content {
    
                height: 300px;
                background-color: #cfa;
                position: relative;
            }
    
            .middle {
                padding: 0 200px;
                width: 100%;
                height: 100%;
                background-color: pink;
                box-sizing: border-box;
            }
    
            .left {
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 100%;
                background-color: orange;
            }
    
            .right {
                position: absolute;
                top: 0;
                right: 0;
                width: 200px;
                height: 100%;
                background-color: orange;
            }
    
            .bottom {
                height: 100px;
                background-color: gray;
            }
        </style>

#### 第四种方法（display-table） ####

* {
                margin: 0;
                padding: 0;
            }
    
            .clearfix::after {
                content: "";
                height: 0;
                line-height: 0;
                display: block;
                clear: both;
                visibility: hidden;
            }
    
            .top {
                height: 100px;
                background-color: #0af;
            }
    
            .content {
                display: table;
                height: 300px;
                background-color: #cfa;
    
            }
    
            .leftout,
            .middleout,
            .rightout {
                display: table-cell;
            }
    
            .middleout {
                width: 100%;
            }
            .middle {
                background-color: pink;
                height: 100%;
            }
            .left {
                width: 200px;
                height: 100%;
                background-color: orange;
            }
    
            .right {
                width: 200px;
                height: 100%;
                background-color: orange;
            }
    
            .bottom {
                height: 100px;
                background-color: gray;
            }
    
      <section class="top"></section>
        <section class="content clearfix">
            <div class="leftout">
                <div class="left">left</div>
            </div>
            <div class="middleout">
                <div class="middle">hello world</div>
            </div>
            <div class="rightout">
                <div class="right">right</div>
            </div>
        </section>
        <section class="bottom"></section>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5eDE5OTcxMDI2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191222161224992.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5eDE5OTcxMDI2,size_16,color_FFFFFF,t_70