簡體   English   中英

如何水平對齊具有不同div大小的按鈕?

[英]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:"") %> &#x20BA;</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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM