javascript - for 在 <div class ='col-sm-4' > 上循环内容，但是当内容太长时 for 循环会跳过一个地方

Question

我 for 循环我的内容，其中有一张图片和该图片下方的一个标题。

<div class="row">
<article>
  {% for news in newsInCat %}
  <div class='col-sm-4'>

    <div class="content">
    <figure class="story-image">
      <a href='{{news.get_absolute_url }}'><img src="{{news.get_image_url}}"  class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
    </figure>
      <div id="forever "style="margin-bottom:30px;">
      <a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><h4 style="font-size: 18px;
    font-weight: 400;">{{news.title}}</h4></a>
  </div>
        </div>
  </div>
  {% endfor %}
</article>
</div>

但是当{{news.title}} 变得超过一行时，标题下面的内容会破坏它的形式。我会用图片显示问题。

标题很长，需要两行。现在下面的内容被移到较低的级别

有人可以帮我解决这个问题吗？

Answer 1

为循环元素提供固定高度

article .col-sm-4 {
height:300px;//change this
}