如何使用CSS Flexbox实现两段文本横向并排显示？

算力阿峰

2026-7-5

解决Flexbox布局下段落横向并排的对齐问题

问题根源

你当前的布局问题核心在于：.content容器未启用Flex布局，导致.textp1和.textp2默认以块级元素上下堆叠；再加上.content设置了过窄的max-width:150px，配合负边距强行偏移，直接打乱了整体布局逻辑。

解决方案

给.content添加display:flex，让内部两个段落容器横向排列
移除.textp1的负边距和.textp2的手动边距，用Flex的gap属性控制两段间距，布局更稳定
放宽.content的宽度限制，避免内容挤压溢出
调整标题的对齐方式，保证整体视觉一致性

修改后的CSS代码

.main-body-cont {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-top: 105px;
}

.ABP1 {
   width: 650px;
   height: auto;
}

/* 调整content容器，启用flex并修正宽度限制 */
.content {
   flex: 1;
   max-width: 800px;
   margin-left: 15%;
   margin-top: 3%;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

/* 移除textp1的负边距 */
.textp1 {
}

/* 调整textp2，用flex分配宽度，移除手动边距 */
.textp2 {
   flex: 1;
}

/* 新增段落容器的flex布局，实现横向并排 */
.content .text-p-container {
   display: flex;
   gap: 30px;
}

.content h2 {
   font-weight: bold;
   font-size: 50px;
   white-space: nowrap;
   margin-bottom: 10px;
   margin-top: 10px;
   margin-left: 0;
}

.content h6 {
   margin-left: 0;
   font-size: 18px;
   white-space: nowrap;
   letter-spacing: 6px;
   color: #ed1c24;
}

.text-p {
   font-size: 19px;
   color: #868e96;
}