2022年3月3日 常见布局：两列布局、三列布局及品字布局的分类及其实现

文章结构概述

• • • 一. 常见的双列结构（左侧为固定尺寸，右侧可伸缩）

      • • 1. 将左侧设定为固定尺寸并应用浮动属性，右侧则设置为自动调整
    • 2. 使用弹性布局方式
      • 二. 常见的三列结构（左右两侧固定，中间部分可伸缩）
      • • 1. 左右两侧采用浮动布局
    • 2. 所有子项目均采用左浮动方式
    • 3. 将所有子元素设定为行内块级元素
    • 4. 父级容器使用弹性布局，并将所有子元素设置为flex:1
    • 5. 父级容器使用弹性布局，左右两侧设定固定宽度，中间部分设置为flex:1
    • 6. 应用绝对定位方式
      • 三. 如何实现品字形布局

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

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

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