分區模塊橫著排列，可以使用CSS的顯示器：柔性；内容來實現。 通過設定父容器為彈性容器（Flexbox佈局），其子元素將會默認水准排列。html複製程式碼<；！ DOCTYPE html>； <； html lang=“； zh-CN"； >； <； 頭部>； <； 元字元集=“； UTF-8“ >； <； meta name=“； 視點 內容=“； width=設備寬度，初始比例=1.0英寸； >； <； title>； 兩個水准排列的模塊<； /title>； <； 連結rel=“； 樣式表 href=“； styles.css”； >； <； 頭部>； <； 身體>； <； div類=“； 集裝箱”； >； <； div類=“； 盒子” >； 模塊1<； /div>； <； div類=“； 盒子” >； 模塊2<； /div>； <； /div>； <； 身體>； <； /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; }顯示器：柔性；：設定.集裝箱為彈性容器，使其子元素（兩個分區）橫向排列。
證明內容：中心；：水准居中對齊容器內的子元素。
對齊項目：居中；：垂直居中對齊容器內的子元素。
間隙：20px；：設定兩個模塊之間的間距。
.box：設定每個模塊的背景色、字體顏色、內邊距、寬高等樣式，使其看起來美觀整齊。
上述程式碼會創建一個頁面，其中兩個分區模塊橫向並排，居中對齊，並且在它們之間留有20px的間距。 你可以根據實際需要調整樣式和佈局。