0

可能这个问题已经被问过了，但英语不是我的母语，我无法表达我的搜索问题，我也在谷歌搜索了大约 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 大小不是绝对的，我不能使用边距。我尝试了几件事，但没有任何效果。

4

1 回答 1

0

您需要产品标题 div 的固定高度。由于您为产品标题获得 1 个或更多衬里。

或者

你（们）能做到

.column {
 position: relative;
}

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

上面的样式将让您的按钮放置在您拥有的每张产品卡片的底部，只需确保您的产品标题不会出现 3-4 行，因为它可能与您的按钮重叠

还尝试使其成为一个相对类，以便这种样式仅适用于卡片

于 2015-12-16T02:16:39.517 回答