div 模塊橫著排列，可以使用 CSS 的 display: flex; 屬性來(lái)實(shí)現(xiàn)。通過(guò)設(shè)置父容器為彈性容器（Flexbox 布局），其子元素將會(huì)默認(rèn)水平排列。html復(fù)制代碼<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>橫向排列的兩個(gè)模塊</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復(fù)制代碼/* styles.css */body { margin: 0; padding: 0; font-family: Arial, sans-serif;
}.container { display: flex; /* 啟用 Flexbox 布局 */
justify-content: center; /* 水平居中對(duì)齊子元素 */
align-items: center; /* 垂直居中對(duì)齊子元素 */
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;：設(shè)置 .container 為彈性容器，使其子元素（兩個(gè) div）橫向排列。
justify-content: center;：水平居中對(duì)齊容器內(nèi)的子元素。
align-items: center;：垂直居中對(duì)齊容器內(nèi)的子元素。
gap: 20px;：設(shè)置兩個(gè)模塊之間的間距。
.box：設(shè)置每個(gè)模塊的背景色、字體顏色、內(nèi)邊距、寬高等樣式，使其看起來(lái)美觀整齊。
上述代碼會(huì)創(chuàng)建一個(gè)頁(yè)面，其中兩個(gè) div 模塊橫向并排，居中對(duì)齊，并且在它們之間留有 20px 的間距。你可以根據(jù)實(shí)際需要調(diào)整樣式和布局。