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的。