如何实现左图右文的两列Grid布局？解决图片占空间异常问题

我想要创建一个两列的Grid布局，每个Grid项内部是左侧图片+右侧文本的结构，但图片始终占据大部分空间，哪怕给图片设置了width:10px也没效果，请问怎么调整才能实现目标布局？

问题分析 #

你的代码里有几个关键问题导致布局不符合预期：

1. .formationContainer设置了flex-wrap: wrap，图片和文本会自动换行，没法保持左右排列
2. 图片的宽度设置被默认的图片原始尺寸优先级覆盖，且缺少明确的尺寸约束
3. Grid容器的justify-items: center和子项的width:20vw与Grid列的40vw不匹配，造成空间浪费

修正后的代码 #

CSS #

.menuFormation {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 自动平分两列，适配性更强 */
    grid-gap: 20px;
    width: 90vw;
    margin: 0 auto; /* 让整个Grid容器居中 */
}

.formationContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* 强制不换行，保持图片和文本横向排列 */
    align-items: center; /* 垂直居中对齐内容 */
    gap: 15px; /* 图片和文本之间的间距 */
}

.formationImage{
    width: 80px; /* 设置合适的固定宽度，可按需调整 */
    height: 80px; /* 固定高度保证所有图片尺寸统一 */
    object-fit: cover; /* 保持图片比例，裁剪多余部分 */
    flex-shrink: 0; /* 防止图片被flex容器压缩 */
}

.blocTexteFormation {
    font-size: large;
    flex: 1; /* 让文本占据容器内剩余的所有空间 */
}

HTML #

<main>
    <section>
        <h1>Formations</h1>
    </section>
    <section class="menuFormation">
        <div class="formationContainer"> 
            <img class="formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
            <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
        </div>
        <div class="formationContainer">
            <img class="formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
            <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
        </div>
        <div class="formationContainer">
            <img class="formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
            <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
        </div>
        <div class="formationContainer">
            <img class="formationImage" src="https://www.toureiffel.paris/sites/default/files/actualite/image_principale/vue_depuisjardins_webbanner_3.jpg">
            <div class="blocTexteFormation">Ceci est le texte que nous importerons depuis PHP</div>
        </div>
    </section>
</main>

核心调整说明 #

• 改用repeat(2,1fr)定义Grid列，让两列自动平分容器宽度，比固定vw更适配不同屏幕尺寸
• 移除flex-wrap: wrap并添加align-items: center，保证图片和文本横向排列且垂直居中对齐
• 给图片设置固定宽高+object-fit: cover，既控制尺寸又保持图片比例；flex-shrink:0避免图片被flex容器压缩变形
• 文本设置flex:1，让文本自动填充容器内剩余空间，避免因文本长度不一导致布局错位

内容的提问来源于stack exchange，提问作者Maël Etienne