如何将div内两段内容设为左右两列（Flex布局问题）

你已经把需要并列的第2、3段放在了.para-column容器里，但没给这个容器开启Flex布局，所以flex相关属性没生效。只需要给.para-column添加以下CSS规则，就能实现左右两列：

.para-column {
  display: flex;
  gap: 20px; /* 控制两个段落之间的间距，可按需调整 */
}

.info-p2, .info-p3 {
  flex: 1; /* 让两个段落平分容器宽度 */
}

规则解释： #

• display: flex：给容器启用Flex布局，内部元素会自动横向排列（flex-direction: row是默认值，无需额外设置）
• gap: 20px：给两个段落之间添加间距，避免内容挤在一起
• flex: 1：让两个段落均分容器的可用宽度，保证布局均匀适配

修改后的完整CSS代码： #

section{
    min-height: 100vh;
    padding: 10rem 9% 2rem;
}

/*** ------- ABOUT -------- ***/
.about {
    padding: 40px 0;
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-img {
    flex:  1;
    padding: 20px;
}

.info-right{
    flex: 1;
    padding: 20px;
}

.about-title {
    margin-bottom: 10px;
}

.info-p1, .info-p2, .info-p3 {
    margin-bottom: 10px;
}

/* 新增的两列布局规则 */
.para-column {
  display: flex;
  gap: 20px;
}

.info-p2, .info-p3 {
  flex: 1;
}

/* IRRELEVANT TO ISSUE */
/*
.home {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-content{
    flex: 1;
    padding: 20px;
}

.home-content h1{
    font-size: 35px;
    font-weight: 700;
    line-height: 1.3;
    margin: -3px 0;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: 1s;
    white-space: nowrap;
    margin-bottom: 20px;
    color: white;
}

.home-content p {
    font-size: 1rem;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: 1s;
    color: grey;
}

.home-img {
    flex: 1;
    max-width: 100%;
    overflow: hidden;
}

.home-img img {
    width: 35vw;
    opacity: 0;
    animation: zoomIn 1s ease forwards;
    animation-delay: 2s, 3s;
    max-width: 100%; 
    height: 100%;
    display: block; 
    margin: 0 auto;
}
*/

响应式补充提示： #

如果需要在小屏幕（如手机）上恢复纵向排列，可添加媒体查询适配：

@media (max-width: 768px) {
  .para-column {
    flex-direction: column;
    gap: 10px;
  }
}

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