ruby-on-rails - 移动 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/

我不建议设置固定高度。如果您不使用固定宽度的布局，这会限制您，这是简单的出路。我认为它也不专业。