Jekyll 的 {% for %} 循环本身无限制，但若被包含的模板（如 moviesingle.html）存在多余的 </div> 标签，会导致 HTML 结构错乱，使后续循环项意外脱离父容器。
jekyll 的 `{% for %}` 循环本身无限制，但若被包含的模板（如 `moviesingle.html`）存在多余的 `` 标签，会导致 html 结构错乱，使后续循环项意外脱离父容器。
在你的 moviesingle.html 中，原始代码末尾包含两个额外的 </div> 标签：
</div> </div>
而其对应开头仅有一个 <div class="grid__item2"> 和一个 <div class="card"> —— 换言之，多闭合了两层 div。这会严重破坏 HTML 的嵌套结构：浏览器解析时，前两次循环尚能“勉强”维持 DOM 层级，但从第三次开始，多余的闭合标签会提前终止 #wrapper 容器，导致后续卡片被渲染到 </div> 之外，即脱离 <div id="wrapper">。
✅ 正确写法应严格匹配开闭标签。moviesingle.html 应仅包含自身语义所需的标签，不额外闭合父级容器：
<div class="grid__item2">
<div class="card">
<div class="card_left">
<img src="{{ movie.poster }}" alt="{{ movie.title }}" />
</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="{{ movie.link }}" 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 结构完整性。保持每个 <div>、<section> 等块级元素严格成对出现，是静态站点生成中避免布局崩塌的第一准则。
