网站开发如何使用CSS实现元素水平排列，达成首页图文并排布局效果？

你现有代码存在两个核心问题：

• 类名拼写错误：HTML中父容器类名为desc-pic-parent，CSS中误写为.disc-pic-parent，导致父容器的Grid配置完全没有生效
• 布局逻辑不符合需求：父容器不需要设置3列，文本容器也不需要设置2列，文本部分的标题和介绍应当垂直排列，父容器仅需划分左右两列分别放置文本和图片即可。

调整后代码 #

你可以直接替换原有媒体查询内的CSS代码：

@media (min-width: 1001px) {
    .desc-pic-parent {
        grid-column: 1 / span 3;
        display: grid;
        grid-gap: 4vmin;
        /* 左右两列布局，可根据需求调整比例，比如3fr 2fr就是左宽右窄 */
        grid-template-columns: 1fr 1fr;
        align-items: center; /* 让文本和图片垂直居中对齐 */
        min-height: 280px;
        border-top: 0;
    }

    .homepage-description{
        text-align: left;
        display: grid;
        grid-gap: 2vmin;
        /* 文本内容垂直排列，不需要划分列 */
        grid-auto-flow: row;
        border-top: 0;
    }

    .homepage-description-header{
        font-size: 3rem;
        margin-top: 0;
    }

    .square-pretend-img{
        height: 20rem;
        width: 20rem;
        background-color: #555;
        justify-self: end; /* 让图片靠右对齐，匹配预期效果图 */
    }
}

关键调整说明 #

• 修正了父容器的类名拼写错误，保证Grid布局正常生效
• 父容器改为2列等宽布局，新增align-items: center让文本和图片垂直方向居中对齐，更符合视觉习惯
• 文本容器改为垂直行布局，标题和介绍上下排列，间距调整为2vmin更紧凑
• 移除了图片元素多余的grid-column和position: relative配置，新增justify-self: end让图片在右列靠右显示，和你预期的草稿效果一致

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