Question

我正在使用rails构建活动网站。对于我的索引页面，我有一个代码循环，显示图像，事件标题和每个事件的日期。我需要在图像的顶部显示标题和日期。标题和日期的代码块分别包含在h2和h3标记中。我不完全确定如何正确地设计这个样式。

我的html页面如下所示 -

index.html.erb - 活动

<div class="container">
 <div class="row">
    <div class="col-md-12">
        <div class="events">    
            <% @events.each do |event| %>
                <li><%= link_to (image_tag event.image.url), event, id: "image" %></li>
            <div id="text"> 
                <h2><%= link_to event.title, event %></h2>
                <h3><%= link_to event.date.strftime('%A, %d %b %Y'), event %></h3>
            <% end %>
            </div>  
        </div>          

      </div>
   </div>   
 </div>

我的图像部分的CSS如下 -

Events.css.scss

div.container {
width: 100%;

}   



.col-md-12 { 

     width: 100%;


}    

 div.events img {
    width: 350px;
    height: 350px;
    margin: 20px;
    display: inline-block;
    border-radius: 25px;


}

 div.events li {

    float: left;
    list-style-type: none;
}

如何将此代码循环的文本元素放在相关图像上？

Answer 1

你只需将你的东西打包成一个DOM元素。如果您不确定是否可以创建快速静态HTML原型（普通旧的html文件），然后将相应的元素放入rails视图中。这是一个简单的例子，注意你设置li定位相对和div绝对，所以你可以按照你需要的方式定位...

    <ul>
      <li class="teaser">
          <img src="http://lorempixel.com/400/200/">
          <div class="event-details">
            <h2>foo</h2>
          </div>
      </li>
      <li class="teaser">
        <img src="http://lorempixel.com/400/200/">
        <div class="event-details">
          <h2>foo</h2>
        </div>
      </li>
    </ul>

    li.teaser { width: 400px; height: 200px; position: relative; }
    li.teaser img { width: 100%; height: 100%; }
    div.event-details { background: white; padding: 25px; position: absolute; bottom: 25px; right: 25px; }

在您的情况下肯定...... <% @events.each do |event| %><li>...</li><% end -%>

Rails - 如何在代码循环中将文本放置到图像上

1 个答案: