div 模块横着排列，可以使用 CSS 的 display: flex; 属性来实现。通过设置父容器为弹性容器（Flexbox 布局），其子元素将会默认水平排列。html复制代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>横向排列的两个模块</title> <link rel="stylesheet" href="styles.css"></head><body> <div class="container"> <div class="box">模块 1</div> <div class="box">模块 2</div> </div></body></html>
css复制代码/* styles.css */body { margin: 0; padding: 0; font-family: Arial, sans-serif;
}.container { display: flex; /* 启用 Flexbox 布局 */
justify-content: center; /* 水平居中对齐子元素 */
align-items: center; /* 垂直居中对齐子元素 */
height: 100vh; /* 让容器占满视口高度 */
gap: 20px; /* 子元素之间的间距 */}.box { background-color: #3498db; color: white; padding: 20px; text-align: center; width: 150px; /* 子元素的宽度 */
height: 150px; /* 子元素的高度 */
display: flex; justify-content: center; align-items: center;
}display: flex;：设置 .container 为弹性容器，使其子元素（两个 div）横向排列。
justify-content: center;：水平居中对齐容器内的子元素。
align-items: center;：垂直居中对齐容器内的子元素。
gap: 20px;：设置两个模块之间的间距。
.box：设置每个模块的背景色、字体颜色、内边距、宽高等样式，使其看起来美观整齐。
上述代码会创建一个页面，其中两个 div 模块横向并排，居中对齐，并且在它们之间留有 20px 的间距。你可以根据实际需要调整样式和布局。