如何水平对齐不同大小的div按钮？

Question

可能这个问题已经被问到了，但英语不是我的母语，我无法表达我的搜索问题，我也会在谷歌搜索大约1-2个小时。所以请原谅我。

这是我的问题;

正如您所看到的，由于名称长度不同，按钮未水平对齐。

这是我的代码;

<hr>
      <div class="row column text-center">
         <h2>Most Viewed Products</h2>
         <hr>
      </div>
      <div class="row small-up-2 medium-up-3 large-up-6">
        <% @mosts.each do |most| %>
            <div class="column">
              <%= image_tag most.avatar.url(:large), {:class => "thumbnail"} %>
              <h8><%= link_to most.name, book_path(most) %></h8>
              <p><%= number_to_currency(most.cost, unit:"") %> &#x20BA;</p>
              <%= link_to 'Buy now!', book_path(most), {:class => 'button small expanded hollow', :style => 'float:left;'} %>
            </div>
        <% end %>
      </div>

我在后端使用RoR，你可以看到。另外，我使用Foundation 6作为前端。

由于div大小不是绝对的，我不能使用保证金。我尝试了几件事，但没有任何作用。

Answer 1

您需要产品标题div的固定高度。因为您为产品标题获得了一个或多个衬垫。

或

你可以制作

.column {
 position: relative;
}

.button {
 position: absolute;
 bottom:0; //adjust to make the button place on the bottom of the card
}

上面的样式会让您的按钮放在每个产品卡的底部，只需确保您的产品标题不会变成3-4衬里，因为它可能与您的按钮重叠

还尝试将其设为相对类，以便此样式仅适用于卡片