容器图文布局求助：调整图文与容器边距及元素间距

安全阿岳

2026-6-18

解决布局问题：图片贴容器右侧、文本贴容器左侧并保留合理间距

现有代码的问题分析

HTML标签嵌套错误：存在<h2>嵌套<h2>、<p>嵌套<p>的非法结构，会导致浏览器解析异常
CSS语法与逻辑错误：
- gap: 45 缺少单位，CSS中必须指定长度单位（如px）
- padding-left:none 写法无效，CSS里没有none这个padding值，需用0替代
- 文本容器的padding重复设置，且冗余的右侧/顶部padding导致文本无法贴近左侧边框
- 间距设置位置错误，把gap放在图片容器内无法实现两个区块的间距控制

修正后的完整代码实现

修正后的HTML

<body>
    <div style="display: flex; gap: 45px;">
        <div class="about-us-image">
            <img class="about-image"
                 src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/smiling-handsome-asian-manager-with-modern-device.jpg"
                 alt="smiling-handsome-asian-manager-with-modern-device">
        </div>
        <div class="about-us-text">
            <h2 style="color: #56aeff; font-size: 40px; font-family: Arial;">Who We Are</h2>
            <p style="font-size:20px;">With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
        </div>
    </div>
</body>

修正后的CSS

.about-us-image {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
}

.about-image {
    height: 500px;
    width: 400px;
    box-sizing: border-box;
}

.about-us-text {
    text-align: left;
    width: 50%;
    box-sizing: border-box;
    align-self: start;
    padding: 0;
}