如何实现标题在上、三个div并排的布局样式？

问题根源是你直接给<section class="services">设置了display: flex，导致里面的所有子元素（标题、换行、三个服务卡片）都变成了Flex项目，自然会横向排列。要实现标题在上、卡片并排的效果，只需把三个服务卡片包裹到一个独立容器中，再给这个容器设置Flex布局即可。

修改后的HTML代码 #

<section class="services">
    <h2>Our Services</h2>
    <br>
    <!-- 新增容器包裹三个服务卡片 -->
    <div class="services-container">
        <div class="service">
            <img src="./images/SVGs/education.jpg" alt="Education Logo" />
            <p>IMMIGRATION THROUGH EDUCATION</p>
            <p>We work with all Canadian universities and colleges! Study in Canada is the most secure way for immigration to Canada</p>
            <a href="#form" class="apply">Apply Here</a>
        </div>

        <div class="service">
            <img src="./images/SVGs/business.jpg" alt="Business Logo" />
            <p>IMMIGRATION THROUGH BUSINESS</p>
            <p>There are lots of immigration programs for business owners. Launch your business in Canada!</p>
            <a href="#form" class="apply">Apply Here</a>
        </div>

        <div class="service">
            <img src="./images/SVGs/employment.jpg" alt="Employment Logo" />
            <p>IMMIGRATION THROUGH EMPLOYMENT</p>
            <p>There are some application processes that will help you to move to Canada permanently through employment streams.</p>
            <a href="#form" class="apply">Apply Here</a>
        </div>
    </div>
</section>

对应的CSS代码 #

/* 主section保持块级，让标题自然占满一行 */
.services {
    width: 100%;
    max-width: 1200px; /* 可选：限制最大宽度，避免内容过宽 */
    margin: 0 auto; /* 可选：居中对齐 */
}

/* 服务卡片容器设置Flex布局，实现横向并排 */
.services-container {
    display: flex;
    gap: 2rem; /* 卡片之间的间距，比margin更便捷 */
    flex-wrap: wrap; /* 可选：屏幕变小时自动换行，适配移动端 */
}

/* 每个服务卡片设置基础样式，确保宽度合理 */
.service {
    flex: 1; /* 让卡片自动平分可用宽度 */
    min-width: 280px; /* 可选：设置最小宽度，避免卡片过窄 */
    padding: 1.5rem;
    border: 1px solid #eee; /* 可选：添加边框区分卡片 */
    border-radius: 8px; /* 可选：圆角优化视觉效果 */
}

.service img {
    width: 100%; /* 图片自适应卡片宽度 */
    height: auto;
    margin-bottom: 1rem;
}

效果说明 #

• 标题<h2>会自然占据section整行，因为section默认是块级元素；
• 新增的.services-container作为Flex容器，里面的三个.service会横向排列，flex:1保证它们平分容器宽度，gap控制卡片间距，flex-wrap实现移动端自动换行适配。

内容的提问来源于stack exchange，提问作者Chinenye