讓兩個div模塊橫著排列css怎麼寫

來源：沐陽科技作者：網頁製作 2024-09-03 16:41:54 0

要让两个div模块横着排列，可以使用CSS的display:flex;属性来实现。通过设置父容器为弹性容器（Flexbox布局），其子元素将会默认水平排列。示例代码HTML结构html复制代码

要讓兩個div 模块横着排列，可以使用 CSS 的 display: flex; 属性来实现。通过设置父容器为弹性容器（Flexbox 布局），其子元素将会默认水平排列。

示例代碼

HTML結構

html复制代码
    
    
    横向排列的两个模块
    
    
        模块 1

模块 2

CSS樣式

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 的间距。你可以根据实际需要调整样式和布局。