0

因此，我正在尝试创建一个网站，您可以在其中上传图像并查看它们。我完成了上传部分和部分显示部分，但我无法让它们一起显示。我在图像之间得到了不需要的空间。例如，现在我得到一行有 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/

4

1 回答 1

0

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

于 2012-12-06T17:31:17.037 回答