[英]How to horizontally align buttons with different size of div?
可能已經問過這個問題了,但是英語不是我的母語,我無法表達要搜索的問題,我也在Google上搜索了大約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:"") %> ₺</p>
<%= link_to 'Buy now!', book_path(most), {:class => 'button small expanded hollow', :style => 'float:left;'} %>
</div>
<% end %>
</div>
如您所見,我在后端使用RoR。 另外,我將Foundation 6用於前端。
由於div的大小不是絕對的,因此無法使用margin。 我嘗試了幾件事,但沒有任何效果。
產品標題div需要固定高度。 由於您獲得1個或更多產品標題的襯里。
要么
你(們)能做到
.column {
position: relative;
}
.button {
position: absolute;
bottom:0; //adjust to make the button place on the bottom of the card
}
上面的樣式將使您擁有的每個產品卡的按鈕都位於底部,只需確保您的產品標題不會出現3-4個底線,因為它可能與按鈕重疊
也嘗試使其成為相對類別,以便此樣式僅適用於卡片
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.