如何在HTML中用Flexbox实现左两图右一图的均等布局？

你的代码未生效的核心原因有两点：

1. 父容器.parent未开启Flexbox布局（缺少display: flex），所有Flex相关属性无法发挥作用；
2. 未将左侧两张图片包裹在独立子容器中，导致三张图片直接在父容器内横向排列，无法实现「左两图、右一图」的分区结构。

另外，height: 100%需要确保根元素（html）和body都设置明确高度，否则图片高度无法撑满视口。

HTML #

<body>
    <div class="parent">
        <!-- 左侧容器：包裹两张横向排列的图片 -->
        <div class="left-group">
            <img class="startup1" src="startup1.jpg" alt="Shop Image">
            <img class="startup2" src="startup2.jpg" alt="Shop Image">
        </div>
        <!-- 右侧单张图片 -->
        <img class="startup3" src="startup3.jpg" alt="Shop Image">
    </div>
</body>

CSS #

/* 确保根元素和body撑满视口高度 */
html, body {
    margin: 0;
    height: 100%;
}

.parent {
    width: 100%;
    height: 100%;
    /* 开启Flex布局，父容器分为左右两部分 */
    display: flex;
}

.left-group {
    /* 左侧容器占父容器50%宽度 */
    width: 50%;
    /* 开启Flex布局，让内部两张图片横向排列 */
    display: flex;
}

.startup1, .startup2 {
    /* 两张图片平分左侧容器宽度 */
    width: 50%;
    /* 图片高度撑满左侧容器 */
    height: 100%;
    /* 保持图片比例同时填充容器，避免变形 */
    object-fit: cover;
    outline: none;
}

.startup3 {
    /* 右侧图片占满父容器剩余宽度 */
    flex: 1;
    height: 100%;
    object-fit: cover;
    outline: none;
}

• 添加html, body { height: 100% }确保父级高度生效，图片能撑满视口；
• .parent设置display: flex后，会将.left-group和.startup3横向排列；
• .left-group内部也用display: flex，让两张图片横向平分宽度；
• 使用object-fit: cover保证图片在填充容器时不会变形，按比例裁剪多余部分。

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