CSS - 围绕另一个元素定位一个元素。漂浮在彼此之间

Question

我正在构建一个活动网站并处理索引页面样式。我的计划是将网站徽标和登录/创建活动链接放置在页面顶部，每个活动由一个盒形图像表示，其中包含日期/标题，以链接形式显示到更多活动详情。我几乎完成了一切，除非我无法让图像链接在徽标周围浮动/定位。我附上了一张截图，以说明它目前的样子。我希望事件图像沿着徽标的侧面进行过滤，而不是如何在徽标的任何一侧留出空白。

这里是我的代码 -

index.html.erb

<div class="category"> 
     <ul> 
      <li> 
       <a href="#">Categories</a> 
       <ul> 
         <% Category.all.each do |category| %> 
           <li><a href="#"><%= link_to category.name, events_path(category: category.name) %></a></li> 
          <% end %> 
         <!-- The code loop above creates category links to the home page --> 
       </ul> 
      </li> 
     </ul> 
    </div> 

</nav>  


<div id="logosignin"> 

    <% if user_signed_in? %> 
       <%= image_tag('MamaKnowsLogo.jpg') %> 
       <li><%= link_to 'Create Event', new_event_path %></li> 
       <li><%= link_to 'Profile', user_path(current_user) %></li> 

    <% else %> 
       <%= image_tag('MamaKnowsLogo.jpg') %> 
       <li><%= link_to 'Sign in', new_user_session_path %></li> 
    <% end %> 
</div> 



<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 
     <ul> 

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

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

和相关的CSS。

events.css.scss -

div.container { 
width: 100%; 

} 



.col-md-12 { 

width: 100%; 


}  

li.events { 
width: 350px; 
height: 350px; 
float: left; 
margin: 20px; 
list-style-type: none; 
position: relative; 

} 

li.events img { 
width: 100%; 
height: 100%; 
border-radius: 25px; 




} 

    #logosignin img { 
width: 250px; 
height: auto; 
margin: 0 auto; 


} 

#logosignin { 
width: 250px; 
height: 350px; 
margin: 0 auto; 


} 

#logosignin a { 
text-decoration: none; 
color: #FFFFFF; 
padding: 7px; 
border-radius: 15px; 
background-color: #FF69B4; 




} 

#eventnav { 
height: 75px; 
} 

#logosignin li { 
bottom: 30px; 

list-style: none; 
display: block; 
margin: 0 auto; 
text-align: center; 
} 

我是否需要设置DIV的DIV的事件中的标志？任何援助将不胜感激。

Answer 1

那么你在一个新的行中创建一个新的事件容器，在一个分布在所有屏幕尺寸的12列的div内。

您可以获得更多详细信息here，但Bootstrap中的行（我假设您使用Bootstrap）用于创建水平组列。然后在您的行内，您可以使用col-*（容器分成12列）创建不同宽度的元素。

你可以做的是将你的logosignin嵌套在你的row div中，并与col-*一起玩，以在所有屏幕上实现你想要的外观。您可能需要检查clearfix列如何在小屏幕上高于其他列（请参阅here）。