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 的間距。你可以根據實際需要調整樣式和布局。