wjs-web-application/layout-patterns/2018-equal-height-columns.html at main · wjs-tech/wjs-web-application · GitHub

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!--
  ============================================================
  等高列布局 - 多列等高效果，padding+margin抵消法 / flex实现

  布局方式：padding+margin抵消法（经典） / Flexbox（现代）
  布局思想：
    1. 让多列布局中每一列的高度保持一致，视觉更整齐
    2. 经典方案：使用大padding-bottom和负margin-bottom相互抵消，模拟等高
    3. 现代方案：使用Flex布局，align-items默认stretch自动实现等高

  适用场景：
    - 商品列表卡片等高
    - 多栏布局左右列等高
    - 功能特性展示卡片
    - 任何需要视觉对齐的多列布局

  技术要点：
    - 经典方案：padding-bottom: 9999px + margin-bottom: -9999px
    - 父容器 overflow: hidden 裁剪多余部分
    - 现代方案：display: flex 自动等高
    - Flex方案更简洁，推荐使用
    - 经典方案兼容性更好，支持旧浏览器

  可迁移性：
    - 可迁移到任何需要多列等高的页面
    - Flex方案是现代首选，实现简单
    - 经典方案可作为降级兼容方案

  wjs created by 2018-05-20
  ============================================================
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>等高列布局</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: "Microsoft YaHei", sans-serif;
      color: #333;
      padding: 20px;
      background: #f5f5f5;
    }
    h1 { margin-bottom: 20px; color: #2c3e50; }
    h2 { margin: 25px 0 15px; color: #34495e; font-size: 18px; }
    .demo-section {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    /* 方案一：padding + margin 抵消法（经典方案） */
    .classic-method {
      overflow: hidden;
    }
    .classic-col {
      float: left;
      width: 31.33%;
      margin: 0 1%;
      background: #3498db;
      color: #fff;
      padding: 20px 20px 9999px 20px;
      margin-bottom: -9999px;
      border-radius: 4px;
    }
    .classic-col h3 { margin-bottom: 10px; }
    .classic-col p { font-size: 14px; line-height: 1.6; }

    /* 方案二：Flexbox 方案（现代方案） */
    .flex-method {
      display: flex;
      gap: 2%;
    }
    .flex-col {
      flex: 1;
      background: #2ecc71;
      color: #fff;
      padding: 20px;
      border-radius: 4px;
    }
    .flex-col h3 { margin-bottom: 10px; }
    .flex-col p { font-size: 14px; line-height: 1.6; }

    /* 对比：不等高的普通浮动布局 */
    .normal-method {
      overflow: hidden;
    }
    .normal-col {
      float: left;
      width: 31.33%;
      margin: 0 1%;
      background: #e74c3c;
      color: #fff;
      padding: 20px;
      border-radius: 4px;
    }
    .normal-col h3 { margin-bottom: 10px; }
    .normal-col p { font-size: 14px; line-height: 1.6; }

    .label {
      display: inline-block;
      background: rgba(0,0,0,0.2);
      padding: 2px 10px;
      border-radius: 12px;
      font-size: 12px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>等高列布局 Demo</h1>

  <div class="demo-section">
    <h2>❌ 对比：普通浮动布局（不等高）</h2>
    <div class="normal-method">
      <div class="normal-col">
        <span class="label">内容少</span>
        <h3>第一列</h3>
        <p>只有一行内容</p>
      </div>
      <div class="normal-col">
        <span class="label">内容中等</span>
        <h3>第二列</h3>
        <p>这是第二列的内容</p>
        <p>有两行文字</p>
      </div>
      <div class="normal-col">
        <span class="label">内容多</span>
        <h3>第三列</h3>
        <p>这是第三列的内容，内容比较多</p>
        <p>第二行文字</p>
        <p>第三行文字</p>
        <p>第四行文字</p>
      </div>
    </div>
  </div>

  <div class="demo-section">
    <h2>✅ 方案一：padding + margin 抵消法（经典方案）</h2>
    <div class="classic-method">
      <div class="classic-col">
        <span class="label">padding-bottom: 9999px</span>
        <h3>第一列</h3>
        <p>只有一行内容</p>
      </div>
      <div class="classic-col">
        <span class="label">margin-bottom: -9999px</span>
        <h3>第二列</h3>
        <p>这是第二列的内容</p>
        <p>有两行文字</p>
      </div>
      <div class="classic-col">
        <span class="label">overflow: hidden</span>
        <h3>第三列</h3>
        <p>这是第三列的内容，内容比较多</p>
        <p>第二行文字</p>
        <p>第三行文字</p>
        <p>第四行文字</p>
      </div>
    </div>
  </div>

  <div class="demo-section">
    <h2>✅ 方案二：Flexbox 方案（现代方案，推荐）</h2>
    <div class="flex-method">
      <div class="flex-col">
        <span class="label">display: flex</span>
        <h3>第一列</h3>
        <p>只有一行内容</p>
      </div>
      <div class="flex-col">
        <span class="label">align-items: stretch</span>
        <h3>第二列</h3>
        <p>这是第二列的内容</p>
        <p>有两行文字</p>
      </div>
      <div class="flex-col">
        <span class="label">自动等高</span>
        <h3>第三列</h3>
        <p>这是第三列的内容，内容比较多</p>
        <p>第二行文字</p>
        <p>第三行文字</p>
        <p>第四行文字</p>
      </div>
    </div>
  </div>
</body>
</html>