0

そのため、画像をアップロードして表示できる Web サイトを作成しようとしています。アップロード部分とショー部分を部分的に完了しましたが、それらを一緒に表示することはできません。画像間に不要なスペースができます。たとえば、現在、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 に答える