2022-09-03 常见布局:两列布局和三列布局以及品字布局的分类和实现

前端OnTheRun

已于 2023-03-31 16:56:52 修改

阅读量217

点赞数

分类专栏：知识点项目与应用笔记文章标签： flex css html float 浮动

于 2022-09-03 15:58:30 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/126678662

版权

本文介绍了常见的两列布局和三列布局的实现方法，包括左侧固定宽度、右侧自适应的两列布局，以及左右固定、中间自适应的三列布局。使用了浮动、flex布局以及绝对定位等技术。同时，还探讨了品字形布局的实现，通过margin和transform来达成布局效果。

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

文章目录

一.常见两列布局(左栏固定宽度,右栏自适应)

1.左边设置固定宽度并浮动,右边自适应

    #container{
   
      width: 100%;
      min-width:450px;
      height: 1000px;
    }
    /* 写法一:左边设置固定宽度并浮动,右边自适应 */
    .left{
   
      float: left;
      width: 200px;
      height: 100%;
      background: rgba(167, 158, 158,.4);
    }
    .right{
   
      float:right;
      width:calc(100% - 200px);
      min-width:250px;
      height: 100%;
      background: yellowgreen;
    }

2.flex布局

    #container{
   
      width: 100%;
      min-width:450px;
      height: 1000px;
      display: flex;
    }
    #container>*{
   
      height:100%;
    }
    /* 写法二:flex布局 */
    .left{
   
      width: 200px;
      background: rgba(167, 158, 158,.4);
    }
    .right{
   
      flex: 1;/* right平分剩余空间 */
      min-width:250px;
      background: yellowgreen;
    }