如何调整代码中的文本布局以匹配目标效果图？

你的代码存在以下几个问题导致布局不符合预期： #

• 同一个元素重复写了style属性，HTML规范中一个元素只能有一个style属性，多个会被覆盖
• <img>标签未闭合，不符合HTML语法规范
• 错误地在<div>内部使用了<body>标签，这是语义错误，应该用普通的块级标签（比如<p>）代替
• 头部的头像和文字区域没有设置横向布局，导致无法并排显示
• 头像缺少圆角样式，无法呈现期望的圆形效果

修正后的代码： #

<div className="card">
  <img src="html-css-assessment/images/desert.jpg" alt="Avatar" style="width:100%; height:194px;" />
  <div className="container">
    <header style="display: flex; align-items: center; gap: 16px;">
      <img 
        src="person-avatar.jpg" 
        id="avatar" 
        style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover;" 
        alt="User Avatar" 
      />
      <div>
        <h3 style="color:#000; margin: 0;" className="title1">Title goes here</h3>
        <p style="color:#232F34; margin: 4px 0 0 0;">Secondary text</p>
      </div>
    </header>
    <div>
      <p style="font-size:22px; color: #666;" className="body1">
        Greyhound divisely hello coldly wonderfully marginally far upon excluding.
      </p>
    </div>
  </div>
</div>

关键调整说明： #

• 合并了顶部图片的两个style属性，确保宽高样式都生效
• 给<header>添加了display: flex; align-items: center; gap: 16px;，让头像和文字横向居中对齐并留出间距
• 给头像设置了固定宽高和border-radius: 50%，实现圆形头像效果
• 替换了错误的<body>标签为<p>，并把font-size放到style属性中
• 给标题和副标题添加了少量margin调整间距，让排版更自然
• 闭合了所有<img>标签，符合HTML语法规范

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