求助：调整三个文本区块左到右对称排列的CSS布局方案

需求：三个文本区块从左到右排列，.mission居左，.please居右，当前已实现横向显示，但布局不对称、存在偏移。

现有代码 #

HTML代码 #

<div class="mission">
    <p>Our Mission is to provide a safe, reliable, loving, and caring service to each and every one of our furry friends</p>
</div>

<div class="qual">
    <p>Im fully qualified with Animal Management Level 3 at Distinction level, Canine Behaviour, Beginner Canine Trainer, Ultrasound Oral Care Qualification, Fully Insured, DBS Criminal Record Checked Clear, Dog First Aid & Emergency Canine Care Trained, Professional, Friendly, Reliable and Punctual.</p>
</div>

<div class="please">
    <p>Please explore our site and if we can help with your Dog Care or other Pet Care requirements then please get in touch.</p> 
</div>

CSS代码 #

.mission {
max-width: 300px;
margin-top: 10rem
}

.qual {
max-width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: -10rem;
}

.please {
max-width: 300px;
padding-left: 60rem;
margin-top: -12rem;
}

优化方案：用Flexbox实现稳定对称布局 #

你之前用负margin和固定padding调整位置，这种方式很容易因为屏幕尺寸变化或文本长度不同导致偏移。改用Flexbox能彻底解决这个问题，代码更简洁，布局更稳定。

修改后的HTML（新增容器包裹三个区块） #

<div class="container">
    <div class="mission">
        <p>Our Mission is to provide a safe, reliable, loving, and caring service to each and every one of our furry friends</p>
    </div>

    <div class="qual">
        <p>Im fully qualified with Animal Management Level 3 at Distinction level, Canine Behaviour, Beginner Canine Trainer, Ultrasound Oral Care Qualification, Fully Insured, DBS Criminal Record Checked Clear, Dog First Aid & Emergency Canine Care Trained, Professional, Friendly, Reliable and Punctual.</p>
    </div>

    <div class="please">
        <p>Please explore our site and if we can help with your Dog Care or other Pet Care requirements then please get in touch.</p> 
    </div>
</div>

修改后的CSS #

/* 容器设置为Flex布局，实现横向排列 */
.container {
    display: flex;
    justify-content: space-between; /* 自动让左区块贴左、右区块贴右，中间区块居中 */
    align-items: flex-start; /* 三个区块顶部对齐，避免文本高度不同导致垂直偏移 */
    gap: 2rem; /* 区块间留间距，不会挤在一起 */
    max-width: 1200px; /* 限制容器最大宽度，适配大屏幕 */
    margin: 10rem auto 0; /* 垂直方向留10rem上边距，水平居中容器 */
    padding: 0 1rem; /* 小屏幕下左右留边距，防止内容贴边 */
}

/* 禁止区块被压缩，保证各自宽度 */
.mission, .qual, .please {
    flex-shrink: 0;
}

.mission {
    max-width: 300px;
}

.qual {
    max-width: 500px;
}

.please {
    max-width: 300px;
}

效果说明 #

• 布局自动对称：.mission固定在最左侧，.please固定在最右侧，.qual自动居中在中间空间
• 适配性强：不管屏幕尺寸怎么变，区块都会保持合理的排列和间距
• 稳定性高：不会因为文本行数变化或屏幕缩放出现偏移问题

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