Rails/Bootstrap。使用。每個下降在水平前有一個新的縮略圖

每個週期我都會在前一個循環下得到新的縮略圖。任何建議如何解決？每個循環如何在前一個循環旁邊水平添加新的縮略圖，直到該空間被填充，然後移動到下一行？謝謝。Rails/Bootstrap。使用。每個下降在水平前有一個新的縮略圖

CODE

<% @employees.each do |em| %> 
    <div class="listTumbnail"> 
     <% if em.user.imagepath %> 
      <div class = "user-image"> 
       <img src="<%= em.user.imagepath%>" class="listimg"> 
      </div> 
     <% else %> 
      <div> 
       <%= image_tag("icons/desconocido.jpg", :alt => "not found", :class => "listimg") %> 
      </div> 
     <% end %> 
    </div> 
    <% end %> 

.user-image { 
    float: none; 
    padding-top: 127px; 
    margin-left: 193px; 
    padding-left: 6px; 
    border-left-style: solid; 
    border-left-color: #000; 
    border-left-width: 1px; 
} 

.listimg { 
    display: block; 
    max-width:80px; 
    max-height:100px; 
    width: auto; 
    height: auto; 
    margin: 0 auto; 
    border-radius: 40px; 
} 

.listTumbnail { 
    border: 2px solid #95989A; 
    border-radius: 3px; 
    color: #000; 
    height: 140px; 
    width: 110px; 
    margin: 5px; 
    }

來源

2017-06-16 Spiky71

你能提供一個圖片或其他的行爲和更詳細的解釋你想要它實際上做什麼？ –

嗨，我添加了一個從圖片..希望它澄清。謝謝 – Spiky71

你能提供你用於這個代碼的CSS /樣式表嗎？ – Belder

嘗試添加這對您的樣式表：

.listThumbnail { 
    display: block; 
} 

.user-image { 
    display: inline-block; 
}

如果由於某種原因你沒有在你的項目中的css文件，這裏有一個基本添加方法：

創建一個名爲my_styles.css的文件（或任何你想命名它）&在那裏添加上面的css示例。

添加在您的application.html.erb文件的<head>以下鏈接：

<link rel="stylesheet" type="text/css" href="my_styles.css">

這使你的HTML文件CSS文件/樣式表的工作。

來源

2017-06-16 14:49:17 Belder

嗨布蘭登，謝謝你的回答。它沒有工作：這是我有的CSS： .user-image { float：none; padding-top：127px; margin-left：193px; padding-left：6px; border-left-style：solid; border-left-color：＃000; border-left-width：1px; display：inline-block; } – Spiky71

.listTumbnail { border：2px solid＃95989A; border-radius：3px; 顏色：＃000; height：140px; width：110px; margin：5px; display：block; } – Spiky71

.listimg {display：block; max-width：80px; max-height：100px; 寬度：自動; 身高：自動; margin：0 auto; border-radius：40px; } – Spiky71

Rails/Bootstrap。使用。每個下降在水平前有一個新的縮略圖

回答

相關問題