Jekyll循环仅包裹前两个元素，其余溢出wrapper容器求助

先直接看生成的静态HTML源码——打开浏览器开发者工具，找到id为wrapper的div，查看它的闭合标签是不是在第二个电影卡片之后就出现了，十有八九是模板标签没写对导致结构错乱。

以下是具体排查和解决方向：

1. 检查moviesingle.html的标签闭合 #

循环渲染时，每个卡片的HTML必须完整闭合。如果你的电影卡片模板漏写了闭合标签（比如</div>），循环到第三个卡片时标签嵌套会乱掉，wrapper会被意外提前闭合，后面的卡片自然就跑到容器外面了。

举个错误模板的例子：

<div class="movie-card">
  <h2>{{ movie.title }}</h2>
  <p>{{ movie.desc }}</p>
  <!-- 这里漏掉了</div> -->

补上</div>，确保每个循环迭代都输出完整的卡片结构。

2. 排查CSS布局问题 #

如果卡片用了float属性，而wrapper没有清除浮动，会导致容器高度坍塌，只能包裹前几个卡片，后面的浮动卡片会溢出。解决方法：

• 给wrapper添加overflow: hidden样式：

#wrapper {
  overflow: hidden;
}

• 或者用clearfix方案，先定义clearfix样式：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

再给movies.html里的wrapper加上这个类：

<div id="wrapper" class="clearfix">
  {% include movielist.html %}
</div>

3. 检查循环中的异常数据或模板逻辑 #

如果某个电影的字段缺失，或者模板里的条件判断没写全（比如漏了{% endif %}），也会导致HTML结构错乱。比如模板里有：

{% if movie.poster %}
  <img src="{{ movie.poster }}">
<!-- 这里漏了{% endif %} -->

这种情况会让后续标签全部错位，需要确保所有条件判断都有对应的闭合标签，同时检查site.movies里的每个数据项是否完整。

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