CSS跨文本覆盖图像问题
问题描述:
我已经上传了一个图像,但无法正确定位日期框。正如你所看到的,还有一个日期框在最右边。我认为很多问题是由于position: absolute
,但如果有办法让它保持在div中,这将是很好的。任何帮助,将不胜感激。CSS跨文本覆盖图像问题
编辑:这是代码。
.event-picture-block { display: inline;}
.event-date-box { position: absolute; margin-top: 300px; margin-left: 2.4%; background-color: white; color: black; font-size: 35px; width: 10%; text-align: center; }
.event-image { width: 33.1%; }
<div class="container">
<% @events.each do |event| %>
<div class="event-picture-block">
<span class="event-date-box">
<%= event.date.strftime("%^b %e") %>
</span>
<%= link_to event_path(event), class:"link-margin" do %>
<%= image_tag(event.image.url(:small), :class =>"event-image") %>
<% end %>
</div>
<% end %>
</div>
谢谢!
答
尝试添加位置:相对于画面块:
.event-picture-block { display: inline;position:relative;}
,并更改其余的CSS属性按您的要求。
+0
我这样做了,但日期文本框仍然在顶行的屏幕上熄灭。编辑:原来我有一个保证金 - 右:-3px;谢谢。我可能需要删除由于我的downvotes。 –
请粘贴一些代码或制作一个jsfiddle –
您的代码和输出的图像几乎毫无价值。请复制+粘贴相关代码到问题中。 –
很抱歉,我们无法单独为您提供图片帮助。请张贴您的HTML和CSS片段。 – Gezzasa