如何使用HTML和CSS实现个人作品集网站「关于我」板块图文并排布局

问题原因 #

你当前的代码中，「关于我」板块的图片、标题、段落全部放在未设置横向布局的about-text容器内，额外给图片添加的left: 70%相对定位规则也打乱了正常排布，因此无法实现左右并排效果。

修改方案 #

1. 调整HTML结构

将about-text容器内的内容拆分为图片容器、文本容器两个独立子模块，方便后续布局控制：

<section class="about">
    <div class="row">
        <div class="about-text">
            <!-- 图片单独放在子容器 -->
            <div class="about-img-box">
                <img src="images/women%20image.jpeg" class="personal-img" alt="about me picture">
            </div>
            <!-- 文本内容单独放在子容器 -->
            <div class="about-content">
                <h2>About</h2>
                <p>I am Hiba Youssef, I am studying <br>Information Technology Engineering <br>at Damascus university.
                    I have three years experience in React.
                </p>
            </div>
        </div>
    </div>
</section>

2. 调整对应CSS规则

删除原有.personal-img、.about-text img的错误定位、冗余显示规则，新增flex横向布局规则：

/* 给about-text父容器添加横向flex布局 */
.about-text {
    padding: calc(6*var(--spacing)) calc(6*var(--spacing));
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    gap: calc(4*var(--spacing)); /* 自定义图片和文本的间距 */
}

/* 保留图片宽高设置，删除原有错误的position、left、display属性 */
.personal-img{
    object-fit: contain;
    width: calc(48*var(--spacing));
    height: calc(44*var(--spacing));
}

/* 可选：移动端适配，小屏幕下自动切换为上下排布 */
@media only screen and (max-width: 768px) {
    .about-text {
        flex-direction: column;
    }
}

修改后即可实现图片和文本左右并排的预期效果。

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