HTML CSS flex布局下图片与右侧文本对齐异常问题求助

问题原因 #

你当前的.rows flex容器直接将img、h3、p作为同级子元素，flex默认横向排列会导致标题和段落没有垂直堆叠，是对齐异常的核心原因。

修复步骤 #

1. 给右侧的标题和段落套一个独立的文本容器，实现内部垂直排列
2. 给flex容器添加交叉轴对齐规则，统一图片和文本的对齐基准
3. 重置浏览器默认边距、添加防挤压规则，消除样式偏移

完整修改代码 #

CSS样式 #

.rows {
    background-color: #00a3cc;
    border: 2px solid black;
    margin: 2px;
    clear: both;
    display: flex;
    /* 控制交叉轴对齐：flex-start为顶部对齐，需要垂直居中可替换为center */
    align-items: flex-start;
    padding: 8px;
    /* 控制图片和文本的间距 */
    gap: 12px;
}

/* 图片样式，防止变形挤压 */
.rows img {
    width: 80px; /* 可按需调整尺寸 */
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
}

/* 右侧文本容器，内部垂直排列 */
.text-content {
    display: flex;
    flex-direction: column;
    /* 如需文本整体和图片垂直居中，可开启下面两行 */
    /* min-height: 80px;
    justify-content: center; */
}

/* 重置默认边距，消除浏览器自带样式影响 */
.text-content h3, .text-content p {
    margin: 0;
}

HTML结构 #

<div class="rows">
    <img src="img/mustang.jpg" alt="福特野马">
    <div class="text-content">
        <h3 class="class">#3 - Ford Mustang 1969</h3>
        <p class="class">The Ford Mustang...</p>
    </div>
</div>

所有条目统一使用该结构即可实现全局对齐，不会出现最后一组样式异常的问题。

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