如何通过CSS实现标题、文本与图片并排展示的前端布局效果？

修复后的实现方案 #

你原有代码的核心问题是没有给图文父容器设置flex布局，同时使用了固定左边距硬挪元素位置，自然无法实现预期的并排效果，修改后的可运行代码如下： #

调整后的HTML代码

<section>
<article class="articleactu">
  <h2>最新资讯</h2>
  <div class="content-wrap">
      <img src="images/gtaarticle.jpeg" alt="GTA相关资讯配图" class="article-img">
      <div class="text-group">
        <p>GTA：三部曲最终版让粉丝大失所望！</p>
        <p>游戏内存在大量BUG，严重影响玩家体验</p>
        <p>发布日期：11月25日</p>
      </div>
  </div>
</article>
</section>

调整后的CSS代码

section .articleactu {
    position: relative;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
/* 给图文容器设置flex实现横向并排 */
.articleactu .content-wrap {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 15px;
}
.articleactu .article-img {
    max-width: 200px;
    border-radius: 15px;
    flex-shrink: 0;
}
.articleactu h2 {
    margin: 0;
    font-size: 24px;
}
.articleactu .text-group p {
    margin: 0 0 10px 0;
    line-height: 1.5;
}
.articleactu .text-group p:last-child {
    margin-bottom: 0;
}

实现逻辑说明 #

• 新增content-wrap作为图片和文本的共同父容器，设置display: flex即可直接实现子元素横向并排
• 图片设置flex-shrink:0避免宽度被文本挤压变形，可自行调整max-width修改图片展示尺寸
• 移除了所有写死的固定左外边距，替换为更灵活的内边距、间距控制，适配不同屏幕尺寸
• 所有文本统一放到text-group容器内，避免多个p标签和图片错位排列
• 如果需要图片放在右侧、文本放在左侧，只需给.content-wrap添加flex-direction: row-reverse属性即可

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