Question

所以我想创建一个网站，您可以上传图片并查看它们。我完成了上传部分和部分显示部分，但我不能让它们一起显示。我在图像之间得到了不需要的空间。例如，现在我得到一个有4个图像的行，然后下一行只有1个图像（我无法上传截图，因为我没有足够的声望点，抱歉）。我已经尝试了所有我知道的东西来填补空闲空间但没有成功。我的节目视图代码是，

<%= 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;，因为它们默认为inline。

Ruby on Rails图像显示

1 个答案: