CSS多栏布局-两栏布局和三栏布局

目录

一、两栏布局

左列定宽，右列自适应

        1.利用浮动，margin实现

2.浮动+BFC

3. 定位

4.flex

5.table布局 

二、三栏布局

左右两列定宽，中间自适应

         1.浮动+margin 

2.浮动+BFC

3.flex

4.table布局

5.定位

---

相信大家在面试的时候也会经常碰到两栏、三栏布局，一下列出来几种方式以供大家参考，废话不多说，直接上干货，如有不足之处，请大家补充。

一、两栏布局

左列定宽，右列自适应

1.利用浮动，margin实现

  

    
left固定
    
right自适应
  

 2.浮动+BFC

.container {
      width: 500px;
      height: 200px;
      line-height: 200px;
    }
    .left {
      width: 200px;
      height: 100%;
      background: rgb(177, 141, 214);
      text-align: center;
      float: left;
    }
    .right {
      height: 100%;
      /* 触发BFC */
      overflow: hidden;
      background: rgb(205, 29, 58);
      text-align: center;
    }
  
  

    
left固定
    
right自适应
  

 

3. 定位

  

    
left固定
    
right自适应
  

 

 4.flex

  

    
left固定
    
right自适应
  

5.table布局 

  

    
left固定
    
right自适应
  

二、三栏布局

左右两列定宽，中间自适应

1.浮动+margin 

  

    
left固定
    
right固定
    
中间自适应
  

 2.浮动+BFC

  

    
left固定
    
right固定
    
中间自适应
  

3.flex

  

    
left固定
    
中间自适应
    
right固定
  

4.table布局

注意容器的顺序

  

    
left固定
    
中间自适应
    
right固定
  

5.定位

注意容器的顺序

  

    
left固定
    
right固定
    
中间自适应
  

欢迎在评论区交流。如果文章对你有所帮助，不要忘了点上宝贵的一赞！

我的博客原文：CSS多栏布局-两栏布局和三栏布局