抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

布局方式整理

4.4k 字

22 分钟

次

条

摘要：本文整理了几种常见的布局方式。

1 静态布局

特点：最为原始的布局方式。

场景：用于简单的页面，或者需要固定尺寸的模块，不需要根据屏幕尺寸变化调整。

原理：最简单的布局方式，不需要使用特别的技巧。

示例：

html
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
<!DOCTYPE html>
<html lang="en">
  <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;
      }

      ul,
      ol {
        list-style: none;
      }

      body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
      }

      /* 头部样式 */
      header {
        width: 100%;
        height: 80px;
        background-color: #333;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #222;
      }

      /* 容器样式 */
      .container {
        width: 100%;
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
      }

      /* 侧边栏样式 */
      .sidebar {
        width: 250px;
        background-color: #444;
        color: white;
        padding: 20px;
        border-right: 1px solid #333;
      }

      /* 主体内容样式 */
      .main-content {
        flex: 1;
        background-color: white;
        padding: 20px;
      }

      /* 页脚样式 */
      footer {
        width: 100%;
        height: 60px;
        background-color: #333;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #222;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>网站标题</h1>
    </header>

    <!-- 容器 -->
    <div class="container">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <h3>侧边栏</h3>
        <ul>
          <li>菜单一</li>
          <li>菜单二</li>
          <li>菜单三</li>
        </ul>
      </div>

      <!-- 主体内容 -->
      <div class="main-content">
        <h2>主要内容</h2>
        <p>这是一个静态布局的示例页面。页面结构包括头部、侧边栏、主体内容和页脚。所有元素的尺寸都是固定的。</p>
      </div>
    </div>

    <!-- 页脚 -->
    <footer>
      <p>© 静态布局示例</p>
    </footer>
  </body>
</html>

2 浮动布局

特点：脱离文档流，方便进行图文混排和多列显示。

场景：用于图文混排的页面，以及需要多列布局场景。

原理：通过设置float属性进行浮动，需要在合适的元素上使用清除浮动，解决浮动塌陷等问题。

示例：

html
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
<!DOCTYPE html>
<html lang="en">
  <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: Arial, sans-serif;
        background-color: #f5f5f5;
      }

      /* 头部样式 */
      header {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
      }

      /* 容器样式 */
      .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      /* 主体内容样式 */
      .main-content {
        padding: 20px;
      }

      /* 三列布局 */
      .columns {
        overflow: hidden; /* 清除浮动塌陷 */
      }

      .column {
        float: left;
        width: 33.33%; /* 三列等宽 */
        padding: 15px;
        box-sizing: border-box;
      }

      .column:first-child {
        background-color: #f0f0f0;
      }

      .column:nth-child(2) {
        background-color: #e0e0e0;
      }

      .column:last-child {
        background-color: #d0d0d0;
      }

      /* 页脚样式 */
      footer {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
        margin-top: 20px;
      }

      /* 清除浮动 */
      .clearfix::after {
        content: '';
        clear: both;
        display: table;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>浮动布局示例</h1>
    </header>

    <!-- 容器 -->
    <div class="container">
      <div class="main-content">
        <h2>三列布局</h2>
        <p>这是一个使用浮动布局实现的三列布局示例。</p>
      </div>

      <!-- 三列布局 -->
      <div class="columns clearfix">
        <div class="column">
          <h3>第一列</h3>
          <p>这是第一列的内容。</p>
        </div>
        <div class="column">
          <h3>第二列</h3>
          <p>这是第二列的内容。</p>
        </div>
        <div class="column">
          <h3>第三列</h3>
          <p>这是第三列的内容。</p>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer>
      <p>© 浮动布局示例</p>
    </footer>
  </body>
</html>

3 定位布局

特点：控制元素在页面上的位置，能够实现悬浮等效果。

场景：用于导航栏的固定显示，侧边广告的悬浮，弹框和模态框的显示。

原理：通过设置position属性实现不同的定位方式，进而控制元素的定位。

示例：

html
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
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
  <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: Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
      }

      /* 头部样式 */
      header {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
      }

      /* 容器样式 */
      .container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        position: relative; /* 为绝对定位的子元素提供参考 */
        min-height: 500px;
      }

      /* 相对定位 */
      .relative-box {
        width: 600px;
        height: 240px;
        background-color: #e0e0e0;
        margin-bottom: 20px;
        padding: 10px;
      }

      .relative-inner {
        position: relative;
        top: -82px;
        left: 48px;
        width: 460px;
        background-color: #d0d0d0;
        padding: 10px;
      }

      /* 绝对定位 */
      .absolute-box {
        width: 600px;
        height: 180px;
        background-color: #e0e0e0;
        margin-bottom: 20px;
        padding: 10px;
      }

      .absolute-inner {
        position: absolute;
        top: 410px;
        left: 78px;
        width: 460px;
        background-color: #d0d0d0;
        padding: 10px;
      }

      /* 固定定位 */
      .fixed-box {
        position: fixed;
        top: 120px;
        right: 20px;
        background-color: #333;
        color: white;
        padding: 10px;
        z-index: 1000; /* 确保悬浮在其他内容之上 */
      }

      /* 粘性定位 */
      .sticky-header {
        position: sticky;
        top: 0;
        background-color: #444;
        color: white;
        margin-bottom: 20px;
        padding: 10px;
        z-index: 100;
      }

      /* 内容区域 */
      .content {
        margin-top: 20px;
        padding: 20px;
        background-color: #f9f9f9;
        min-height: 200px;
      }

      /* 按钮样式 */
      .button {
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      .button:hover {
        background-color: #45a049;
      }

      /* 页脚样式 */
      footer {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>定位布局示例</h1>
    </header>

    <!-- 固定定位 -->
    <div class="fixed-box">
      <button class="button">固定定位</button>
    </div>

    <!-- 容器 -->
    <div class="container">
      <!-- 粘性定位 -->
      <div class="sticky-header">
        <h2>粘性定位</h2>
        <p>粘性定位的内容是固定的，不会随滚动条滚动。</p>
      </div>

      <!-- 相对定位 -->
      <div class="relative-box">
        <h3>相对定位</h3>
        <div>
          <p>被覆盖的内容。</p>
          <p>被覆盖的内容。</p>
          <p>被覆盖的内容。</p>
          <p>被覆盖的内容。</p>
        </div>
        <div class="relative-inner">
          <h4>相对定位</h4>
          <p>这是一个相对定位的元素，相对于自身原始位置偏移。</p>
          <p>相对定位会覆盖其他元素。</p>
        </div>
        <div>
          <p>相对定位后面的元素不会占用上面相对定位元素的位置。</p>
        </div>
      </div>

      <!-- 绝对定位 -->
      <div class="absolute-box">
        <h3>绝对定位</h3>
        <div>
          <p>被覆盖的内容。</p>
          <p>被覆盖的内容。</p>
          <p>被覆盖的内容。</p>
          <p>被覆盖的内容。</p>
          <p>被覆盖的内容。</p>
        </div>
        <div class="absolute-inner">
          <h4>绝对定位</h4>
          <p>这是一个绝对定位的元素，相对于最近的已定位父元素偏移。</p>
          <p>父元素没有定位，相对于根元素偏移。</p>
          <p>绝对定位会覆盖其他元素。</p>
        </div>
        <div>
          <p>绝对定位后面的元素不会占用上面相对定位元素的位置。</p>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <h2>内容区域</h2>
        <p>这是一个内容区域，用于展示页面的主要内容。</p>
        <p>你可以滚动页面查看粘性定位的效果。</p>
        <p>尝试滚动页面，观察粘性定位的表头是否会固定在顶部。</p>
      </div>
    </div>

    <!-- 页脚 -->
    <footer>
      <p>© 定位布局示例</p>
    </footer>
  </body>
</html>

4 弹性布局

特点：能够灵活的实现页面上的布局，支持按照屏幕分辨率显示页面内容。

场景：适合处理动态内容和复杂对齐需求。

原理：通过设置display属性为flex开启弹性布局，通过相关属性控制页面元素。

示例：

html
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
<!DOCTYPE html>
<html lang="en">
  <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: Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
      }

      /* 头部样式 */
      header {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
      }

      /* 容器样式 */
      .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      /* 主体内容样式 */
      .main-content {
        margin-top: 20px;
      }

      /* 水平居中 */
      .horizontal-center {
        display: flex;
        justify-content: center;
        background-color: #f0f0f0;
        margin: 20px 0;
      }

      .horizontal-center .item {
        padding: 20px;
        background-color: #e0e0e0;
        margin: 0 10px;
      }

      /* 垂直居中 */
      .vertical-center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px 0;
      }

      .vertical-center .item {
        padding: 20px;
        background-color: #d0d0d0;
        margin: 0 10px;
      }

      /* 等分布局 */
      .space-between {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
      }

      .space-between .item {
        padding: 20px;
        background-color: #e0e0e0;
        flex: 1;
        margin: 0 10px;
      }

      /* 弹性布局 */
      .flex-box {
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
      }

      .flex-box .item {
        padding: 20px;
        background-color: #e0e0e0;
        flex: 1 1 200px; /* 基础宽度为 200px，允许伸缩 */
        margin: 10px;
        min-width: 150px;
      }

      /* 页脚样式 */
      footer {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>弹性布局示例</h1>
    </header>

    <!-- 容器 -->
    <div class="container">
      <div class="main-content">
        <!-- 水平居中 -->
        <h3>水平居中</h3>
        <div class="horizontal-center">
          <div class="item">项目一</div>
          <div class="item">项目二</div>
          <div class="item">项目三</div>
        </div>

        <!-- 垂直居中 -->
        <h3>垂直居中</h3>
        <div class="vertical-center">
          <div class="item">项目一</div>
          <div class="item">项目二</div>
          <div class="item">项目三</div>
        </div>

        <!-- 等分布局 -->
        <h3>等分布局</h3>
        <div class="space-between">
          <div class="item">项目一</div>
          <div class="item">项目二</div>
          <div class="item">项目三</div>
        </div>

        <!-- 弹性布局 -->
        <h3>弹性布局</h3>
        <div class="flex-box">
          <div class="item">项目一</div>
          <div class="item">项目二</div>
          <div class="item">项目三</div>
          <div class="item">项目四</div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer>
      <p>© 弹性布局示例</p>
    </footer>
  </body>
</html>

5 流体布局

特点：能够按照屏幕的分辨率调整页面元素的宽度，保证整体布局不变，也称为栅栏系统。

场景：适合需要适配不同屏幕的场景。

原理：使用百分比定义宽度，配合min-width属性和max-width属性控制尺寸流动范围，尽可能的适应各种分辨率。

示例：

html
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
<!DOCTYPE html>
<html lang="en">
  <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;
      }

      ul,
      ol {
        list-style: none;
      }

      body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
      }

      /* 头部样式 */
      header {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
      }

      /* 容器样式 */
      .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      /* 主体内容样式 */
      .main-content {
        padding: 20px;
      }

      /* 流体布局 */
      .fluid-layout {
        display: flex;
        flex-wrap: wrap;
      }

      .sidebar-left {
        width: 20%;
        padding: 15px;
        background-color: #f0f0f0;
      }

      .content {
        width: 60%;
        padding: 15px;
        background-color: #fff;
      }

      .sidebar-right {
        width: 20%;
        padding: 15px;
        background-color: #e0e0e0;
      }

      /* 响应式调整 */
      @media (max-width: 768px) {
        .sidebar,
        .content,
        .sidebar-right {
          width: 100%;
        }
      }

      /* 页脚样式 */
      footer {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>流体布局示例</h1>
    </header>

    <!-- 容器 -->
    <div class="container">
      <div class="main-content">
        <h2>流体布局</h2>
        <p>以下展示了流体布局的实现方式，元素的宽度基于百分比，可以自适应不同的屏幕尺寸。</p>

        <!-- 流体布局 -->
        <div class="fluid-layout">
          <div class="sidebar-left">
            <h3>左侧边栏</h3>
            <p>这是一个左侧的侧边栏。</p>
            <ul>
              <li>菜单一</li>
              <li>菜单二</li>
              <li>菜单三</li>
            </ul>
          </div>
          <div class="content">
            <h3>主要内容</h3>
            <p>这是一个流体布局的示例。流体布局通过设置元素的宽度为百分比来实现自适应效果。</p>
            <p>当浏览器窗口大小改变时，元素的宽度会自动调整，以适应不同的屏幕尺寸。</p>
          </div>
          <div class="sidebar-right">
            <h3>右侧边栏</h3>
            <p>这是一个右侧的侧边栏。</p>
            <ul>
              <li>菜单一</li>
              <li>菜单二</li>
              <li>菜单三</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer>
      <p>© 流体布局示例</p>
    </footer>
  </body>
</html>

6 响应式布局

特点：能够兼容多个终端，解决不同设备上页面的显示问题。

场景：适合在多个终端展示页面的场景。

原理：通过设置@media属性进行媒体查询，以及与网格系统配合进行布局。

示例：

html
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
<!DOCTYPE html>
<html lang="en">
  <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: Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
      }

      /* 头部样式 */
      header {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
      }

      /* 容器样式 */
      .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      /* 主体内容样式 */
      .main-content {
        padding: 20px;
      }

      /* 导航栏样式 */
      nav {
        background-color: #444;
        padding: 10px;
      }

      nav ul {
        list-style-type: none;
        display: flex;
        justify-content: center;
      }

      nav ul li {
        margin: 0 15px;
      }

      nav ul li a {
        color: white;
        text-decoration: none;
      }

      /* 卡片布局 */
      .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0;
      }

      .card {
        width: calc(33.33% - 20px);
        margin: 10px;
        padding: 20px;
        background-color: #f0f0f0;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }

      /* 响应式调整 */
      @media (max-width: 768px) {
        .card {
          width: calc(50% - 20px);
        }

        nav ul {
          flex-direction: column;
          align-items: center;
        }

        nav ul li {
          margin: 5px 0;
        }
      }

      @media (max-width: 480px) {
        .card {
          width: 100%;
        }

        header h1 {
          font-size: 1.5rem;
        }
      }

      /* 页脚样式 */
      footer {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>响应式布局示例</h1>
    </header>

    <!-- 导航栏 -->
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>

    <!-- 容器 -->
    <div class="container">
      <div class="main-content">
        <h2>响应式布局</h2>
        <p>以下展示了响应式布局的实现方式，页面会根据屏幕尺寸自动调整布局。</p>

        <!-- 卡片布局 -->
        <div class="card-container">
          <div class="card">
            <h3>卡片一</h3>
            <p>这是一个响应式卡片。在大屏幕上并排显示，在小屏幕上堆叠显示。</p>
          </div>
          <div class="card">
            <h3>卡片二</h3>
            <p>这是一个响应式卡片。在大屏幕上并排显示，在小屏幕上堆叠显示。</p>
          </div>
          <div class="card">
            <h3>卡片三</h3>
            <p>这是一个响应式卡片。在大屏幕上并排显示，在小屏幕上堆叠显示。</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer>
      <p>© 响应式布局示例</p>
    </footer>
  </body>
</html>
布局方式整理
https://momashanhe.com/posts/20250406/083755/
本文作者
墨码山河
发布于
2025年4月6日
更新于
2025年6月21日
许可协议
CC BY-NC-SA 4.0
博文难免存在纰漏，如有错误之处，无论大小，恳请读者指正，博主不胜感激。
前端

HTML

CSS

评论