Ruby on Rails图片展示

所以我想制作一个网站，您可以上传您的图片并查看它们。我完成了上传部分和部分演出部分，但我无法让它们一起显示。我在图像之间得到不需要的空间。例如，现在我得到了4张图片，然后下一行只有1张图片（我无法上传屏幕截图，因为我没有足够的声望点，抱歉）。我曾尝试一切，我知道，以填补自由空间，但没有succeed.My放映视图代码，Ruby on Rails图片展示

<%= 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/

来源

2012-12-06 nupac

如果你把你的问题放到jsfiddle.net并发布到这里，我确信你会找到一个快速的回答 –

谢谢你的提示，我马上去做 – nupac

空格由于display: inline;，HTML（或新行）中的任何空格都将显示为空格。尝试更改为display: block并在必要时悬浮，这将删除间距。此外，您的图片也需要有display: block;，因为它们默认为inline。

来源

2012-12-06 17:31:17

Ruby on Rails图片展示

回答

相关问题