Jekyll 循环中 HTML 标签未正确闭合导致容器包裹失效问题解析-html教程-PHP中文网

Jekyll 循环中 HTML 标签未正确闭合导致容器包裹失效问题解析

Jekyll 的 {% for %} 循环本身无限制，但若被包含的模板（如 moviesingle.html）存在多余的标签，会导致 HTML 结构错乱，使后续循环项意外脱离父容器。

jekyll 的 `{% for %}` 循环本身无限制，但若被包含的模板（如 `moviesingle.html`）存在多余的 `` 标签，会导致 html 结构错乱，使后续循环项意外脱离父容器。

在你的 moviesingle.html 中，原始代码末尾包含两个额外的标签：

而其对应开头仅有一个

和一个

—— 换言之，多闭合了两层 div。这会严重破坏 HTML 的嵌套结构：浏览器解析时，前两次循环尚能“勉强”维持 DOM 层级，但从第三次开始，多余的闭合标签会提前终止 #wrapper 容器，导致后续卡片被渲染到

之外，即脱离

。

✅ 正确写法应严格匹配开闭标签。moviesingle.html 应仅包含自身语义所需的标签，不额外闭合父级容器：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

<div class="grid__item2">
  <div class="card">
    <div class="card_left">
      @@##@@
    </div>
    <div class="card_right">
      <h1>{{ movie.title }}</h1>
      <div class="card_right__details">
        <ul>
<li>{{ movie.year }}</li>
          <li>{{ movie.director }}</li>
          <li>{{ movie.rating }} / 10</li>
        </ul>
<div class="card_right__review">
          <p>{{ movie.description }}</p>
          <a href="%7B%7B%20movie.link%20%7D%7D" target="_blank">Read more</a>
        </div>
      </div>
    </div>
  </div>
</div>

? 验证技巧：

使用 HTML Validator 检查生成页面的源码，会明确提示「unclosed element」或「end tag for div seen, but there were open elements」；
在开发时启用 Jekyll 的 --watch --incremental 模式，并配合浏览器「元素检查器」观察实际 DOM 结构，而非仅看模板逻辑；
所有 include 文件应视为「片段（fragment）」，绝不主动闭合外部容器（如 #wrapper），该职责应由调用方（movies.html 或 movielist.html）全权负责。

? 总结：Jekyll 循环本身可靠，问题根源永远在 HTML 结构完整性。保持每个

、

等块级元素严格成对出现，是静态站点生成中避免布局崩塌的第一准则。 {{ movie.title }}