1. 双栏布局

  • 使用float左浮左边栏
  • 右边模块使用margin-left撑出内容块做内容展示
  • 为父级元素添加BFC，防止下方元素飞到上方内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <style>
        .box{
            overflow: hidden; 添加BFC
        }
        .left {
            float: left;
            width: 200px;
            background-color: gray;
            height: 400px;
        }
        .right {
            margin-left: 210px;
            background-color: lightgray;
            height: 200px;
        }
    </style>
    <div class="box">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    采用弹性布局也可
    <style>
        .box{
            display: flex;
        }
        .left {
            width: 100px;
        }
        .right {
            flex: 1;
        }
    </style>
    <div class="box">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

2. 三栏布局

  • 两边使用float，中间使用margin
  • 两边使用absolute，中间使用margin
  • 两边使用float和负margin
  • display：table实现
  • flex实现
  • grid网格布局
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    <style>
        .wrap {
            background: #eee;
            overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
            padding: 20px;
            height: 200px;
        }
        .left {
            width: 200px;
            height: 200px;
            float: left;
            background: coral;
        }
        .right {
            width: 120px;
            height: 200px;
            float: right;
            background: lightblue;
        }
        .middle {
            margin-left: 220px;
            height: 200px;
            background: lightpink;
            margin-right: 140px;
        }
    </style>
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="middle">中间</div>
    </div>

    <style>
      .container {
        position: relative;
      }
      
      .left,
      .right,
      .main {
        height: 200px;
        line-height: 200px;
        text-align: center;
      }

      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        background: green;
      }

      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        background: green;
      }

      .main {
        margin: 0 110px;
        background: black;
        color: white;
      }
    </style>

    <div class="container">
      <div class="left">左边固定宽度</div>
      <div class="right">右边固定宽度</div>
      <div class="main">中间自适应</div>
    </div>

    <style>
      .left,
      .right,
      .main {
        height: 200px;
        line-height: 200px;
        text-align: center;
      }

      .main-wrapper {
        float: left;
        width: 100%;
      }

      .main {
        margin: 0 110px;
        background: black;
        color: white;
      }

      .left,
      .right {
        float: left;
        width: 100px;
        margin-left: -100%;
        background: green;
      }

      .right {
        margin-left: -100px; /* 同自身宽度 */
      }
    </style>

    <div class="main-wrapper">
      <div class="main">中间自适应</div>
    </div>
    <div class="left">左边固定宽度</div>
    <div class="right">右边固定宽度</div>