移动CSS缩略图边框

Question

以下是缩略图网格的屏幕截图。我想将灰色边框移动到低于价格并在所有产品中保持一致。例如，第一个产品的标题较短，因此价格显示在第2行。对于第二个产品，价格显示在第3行。我希望所有产品的第3行下方的边​​框。

这是我的html.erb

<div class="center">
  <div class="row">
    <% @listings.each do |listing| %>
    <div class="col-md-3 col-xs-6">
      <div class="thumbnail" > 
         <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive aspect"), listing %>
      </div>
      <div class="caption">
        <h3><%= listing.name %></h3>
        <p><%= number_to_currency(listing.price) %></p>
      </div>    
     </div>
    <% end %>
  </div>
</div>

这是我的css：请注意，当我将border-bottom从缩略图类移动到字幕类时，由于产品标题长度的变化，边框不会一致地对齐。

.thumbnail
{
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 80% 0 0 0;
  overflow: hidden;
  border: none;
  border-bottom: 1px solid lightgray;
}

img
{
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 3px;
  bottom: 5px;
}

.caption {

  h3 {
  font-size: 17px;
  margin: 2px;
  }

  p {
  font-size: 15px;
  margin: 0px;
  }

position: relative;
top: -10px;

}

Answer 1

您需要在加载DOM后计算每个容器的高度，然后根据最高对象的高度调整每个容器的高度。实现这一目标的唯一方法是使用JS。

这是一个有用的插件：http://brm.io/jquery-match-height/

我不建议设置固定高度。如果您没有使用固定宽度的布局，这将限制您，并且是最简单的方法。在我看来，它也不专业。