HTML嵌入内容重叠问题：如何让嵌入内容按文本流排布？

你的嵌入内容出现重叠，核心原因是当前CSS用绝对定位让embed脱离了文本流，再加上HTML结构混乱（比如把文本和多个embed塞进同一个带相对定位的容器），导致元素堆叠在一起。按以下方法修改即可解决：

1. 修正HTML语法错误 #

原代码里的meta标签存在语法错误，还有多余的</style>标签，先修正这些基础问题：

• 错误的meta标签：<meta name="viewport" content="style=" flex: 1 0 auto; " width=device-width, initial-scale=1"> → 改成正确的<meta name="viewport" content="width=device-width, initial-scale=1">
• 删除多余的</style>标签（无对应开头标签）

2. 重构响应式嵌入的CSS #

去掉让元素脱离文本流的定位设置，让embed回到正常流中，同时保持响应式：

.responsive-embed {
  width: 100%;
  margin: 1rem 0; /* 给每个嵌入块添加上下间距，避免紧贴 */
}

.responsive-embed embed {
  width: 100%;
  height: auto; /* 自动适配高度，保持图表比例 */
  min-height: 580px; /* 可选：设置最小高度，避免图表太矮 */
}

3. 调整HTML结构 #

把文本内容和每个embed分开布局，让元素按顺序融入文本流：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <h1>Some data</h1>

  <h2>Mouths fed</h2>
  <p>This is a standard metric for tracking the number of people - both children and adults - that receive support from our food parcels.</p>
  <p>Here is the breakdown over time - since 2017.</p>

  <!-- 第一个嵌入图表 -->
  <div class="responsive-embed">
    <embed src="./ASSETS/mouths_fed_chart.html"></embed>
  </div>

  <!-- 第二个嵌入图表 -->
  <div class="responsive-embed">
    <embed src="mouths_fed_chart.html"></embed>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

关键修改说明 #

• 移除position: absolute和position: relative，让embed回到正常文本流，元素会按顺序从上到下排列
• 给每个responsive-embed容器添加上下间距，避免内容紧贴
• 让embed宽度占满容器，高度自动适配，同时可通过min-height保证图表最低显示高度
• 重新梳理HTML结构，文本和图表块分开，逻辑更清晰

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