1.代码 html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三个区域示例</title> <style> /* 设置整体容器样式 */ .container { display: flex; /* 使用Flexbox布局 */ justify-content: space-between; /* 子元素之间的间隔相等 */ width: 100%; /* 容器宽度占满整个屏幕 */ } /* 设置每个区域的样式 */ .region { flex: 1; /* 每个区域都等宽 */ height: 200px; /* 你可以根据需要调整高度 */ background-color: #f0f0f0; /* 设置背景色以区分区域，实际使用时可以去除或修改 */ margin: 10px; /* 设置外边距，增加区域之间的间隔 */ padding: 20px; /* 设置内边距，增加区域内部的空间 */ box-sizing: border-box; /* 使得宽度和高度包括内边距和外边距 */ text-align: center; /* 文本居中显示 */ } </style> </head> <body> <div class="container"> <div class="region">区域 1</div> <div class="region">区域 2</div> <div class="region">区域 3</div> </div> </body> </html> 2.效果
