React Flex布局实现About Us区块：图片占1/3文字占2/3遇异常

问题根源 #

• 文字跑到图片下方：.style-about里的flex-wrap: wrap会让flex子项在空间不足时自动换行，导致文字区块挤到图片下面。
• 图片过度放大：图片没有尺寸限制，会默认撑满父容器的宽度，同时按比例放大高度，造成视觉上的过度放大。

修复步骤 #

1. 强制子项保持同一行 #

把.style-about的flex-wrap改成nowrap，确保图片和文字始终在一行排列：

.style-about {
    background-color:#b2c5b2;
    min-height: 91vh;
    display: flex;
    flex-wrap: nowrap; /* 替换原有的wrap */
}

2. 限制图片尺寸，保持比例 #

给图片添加样式，让它适配父容器的同时不破坏比例：

.style-picture img {
    width: 100%; /* 占满父容器宽度 */
    height: 100%; /* 匹配容器高度 */
    object-fit: cover; /* 保持比例，裁剪超出部分；可选换成contain完整显示图片 */
}

3. 精准控制宽度比例（可选） #

如果要严格实现1/3和2/3的宽度分配，用flex-basis固定宽度比例，避免拉伸：

.style-picture {
    flex: 0 0 33.333%; /* 不拉伸、不收缩，占1/3宽度 */
}

.style-info {
    flex: 0 0 66.666%; /* 不拉伸、不收缩，占2/3宽度 */
    padding-left: 20px;
    box-sizing: border-box; /* 防止padding额外增加宽度 */
}

修改后的完整代码 #

About.js #

return (
    <div id="about" className="style-about">
        <div className="style-picture">
            <img src={picture1} alt="About us" /> {/* 补充alt属性，提升可访问性 */}
        </div>
        <div className="style-info">
            <h1 className="style-about-heading"> About Us. </h1>
            <div className="style-paragraph-container">
                ...//Content
            </div>
        </div>
    </div>
)

about.css #

.style-about {
    background-color:#b2c5b2;
    min-height: 91vh;
    display: flex;
    flex-wrap: nowrap;
}

.style-picture {
    flex: 0 0 33.333%;
}

.style-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.style-info {
    flex: 0 0 66.666%;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 可选：让文字垂直居中，优化视觉效果 */
}

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