Ruby on Rails圖像顯示

Question

因此，我試圖建立一個網站，您可以在其中上傳您的圖像並進行查看。 我已經完成了上傳部分，部分完成了展示部分，但無法將它們一起顯示。 我在圖像之間得到了多余的空間。 例如，現在我得到的行中包含4張圖像，然后下一行僅包含1張圖像（抱歉，我無法上傳屏幕截圖，因為我沒有足夠的聲譽點）。 我已經盡我所能填補了空閑空間，但沒有成功。我的show view代碼是，

<%= render 'nav' %>
<div id = "jags_show">
<h1>Your Jags </h1>
<div id = "clear"></div>
<hr />
<% if @jags.empty? %>
<p> NO JAGS UPLOADED YET <p>
<% else %>
<% @jags.each do |j| %>
    <div id = "jags">
        <p id = "jagimage"><%= image_tag j.image_url(:thumb) %></p>
        <p id = "jagname"> <%= j.name %> </p>
        <div class="actions">
         <%= link_to "update", edit_jag_path(j) %> |
         <%= link_to "remove", j, :confirm => 'Are you sure?', :method => :delete %>
        </div>
    </div>
 <% end %>
  <% end %>
</div>

我的CSS是

#jags{
display: inline;
float: left;
padding: 10px;
background-color: #222;
border: 2px solid white;
}
#jagname{
position: relative;
margin-left: 10px;
font-family: Helvetica; 
color:#c1f706;
font-size: 18px;
text-align: center;
}
#jagimage img{
border: 1.5px solid white;
}
#jags_show{
background-image:url('background.jpg');
margin-left: 80px;
margin-right: 40px;
margin-top: 80px;

}
#jags_show h1{
padding-top: 80px;
color: #434341;
font-family: Pilgi;
font-size: 35px;
background-color: #f0f0f0;
display:inline;
position: absolute;
margin-top:-100px;
}
#clear{
clear:both; 
}
.actions a{
color: #b3b2b1;
text-decoration: none;

}
.actions {
text-align: center;
padding: 0px;

}

任何建議/建議將不勝感激。 謝謝。 哦，如果有什么幫助，我正在使用CarrierWave Gem。

所以我讓我的代碼在jsfiddle上運行，並且在那里看起來還不錯，這讓我覺得我遇到的問題是由於圖像的方向不同。 這是我的jsfiddle鏈接http://jsfiddle.net/cVvYE/embedded/result/

Answer 1

空格應display: inline; ，那么HTML（或換行）中的任何空格都將顯示為空格。 嘗試更改為display: block必要時display: block並浮動，這將消除間距。 此外，您的圖片還需要display: block; 也是如此，因為它們默認是inline的。