CSS多种三列自适应布局实现

迈不过友情╰ 2022-11-09 11:21 294阅读 0赞

### 文章目录 ###

*   *   *  第一种：基于float实现
         *  第二种：基于position：absolute实现
         *  第三种：基于display：flex实现
         *  第四种：基于display: table实现
         *  第五种：基于display: grid实现

实现 以下布局  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]

### 第一种：基于float实现 ###

> 实现思路:常规思路，使左右两个Aside分别浮动至左右两侧即可

代码实现

<div class="container">
      
      <header>顶部Heade</header>
      
      <div class="middle clearfix">
        <aside class="left">left</aside>
        <aside class="right">right</aside>
        
        <div class="content">这里是内容</div>
      </div>
      
      <footer>底部Footer</footer>
    </div>

### 第二种：基于position：absolute实现 ###

> 实现思路:为中间三栏父级赋予position: relative，赋予左右Aside position: absolute，并且分别赋予left: 0 right: 0 width:自定义值，赋予中间content left，right 分别等于左右width即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 1]

### 第三种：基于display：flex实现 ###

> 实现思路:赋予左中右三列父级display: flex，赋予左右Aside width自定义，赋予中间content flex:1即可

<div class="container">
      
      <header>顶部Heade</header>
      
      <div class="middle clearfix">
        
        <aside class="left">left</aside>
        
        <div class="content">这里是内容</div>
        
        <aside class="right">right</aside>
      </div>
      
      <footer>底部Footer</footer>
    </div>
    <style type="text/less">
      .container { 
        width: 100%;
        height: 100%;
        header,footer { 
          height: 80px;
          background: #00BCD4;
        }
        .middle { 
          height: calc(100% - 80px - 80px);
          display:flex;
    	aside{ 
    	  width: 300px;
            background: rgba(156, 154, 249, 1);
            height: 100%;
    	}
          .content { 
            flex:1;
          }
        }
      }
    </style>

### 第四种：基于display: table实现 ###

> 实现思路 : 赋予左中右三列父级display: table, width: 100%，分别赋予左中右三列display: table-cell，分别赋予左右Aside width即可。

### 第五种：基于display: grid实现 ###

> 实现思路 : 赋予左中右三列父级display: grid，并且使用grid-template-columns: 300px auto 300px，将其分为宽为300px、auto、300px三列布局即可。

.container { 
        width: 100%;
        height: 100%;
        header,footer { 
          height: 80px;
          background: #00BCD4;
        }
        .middle { 
          display:grid;
    	  grid-template-columns: 300px auto 300px;
          height: calc(100% - 80px - 80px);
    	  aside{ 
    	    background: rgba(156, 154, 249, 1);
    	  }
        }
    }

https://mp.weixin.qq.com/s/IDog\_4HKKyrEv5mg0fKwlg

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]: /images/20221023/762713e483564f2d885212a3d58b3410.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 1]: /images/20221023/b8b232bfb40c4ce4b599a437273bc219.png