CSS - Positionieren eines Elements um ein anderes. Umeinander zu schweben

Question

Ich baue eine Ereignisseite und arbeite am Indexpage-Styling. Mein Plan ist, ein Aufstellungsortlogo zu haben und Ereignisverknüpfung zu unterzeichnen/herzustellen saß tadellos zentral am oberen Rand der Seite und für jedes Ereignis, das durch ein Kastenformbild mit dem Datum/Titel dargestellt wurde, saß oben von ihm als Verbindung durch zu mehr Veranstaltungsdetails. Ich habe so ziemlich alles erledigt, außer dass ich die Bildlinks nicht um das Logo schweben lassen kann. Ich habe unten einen Screenshot angehängt, um zu zeigen, wie es momentan aussieht. Ich möchte, dass die Ereignisbilder entlang der Seite des Logos gefiltert werden und nicht so, wie es jetzt aussieht, mit Leerzeichen auf jeder Seite des Logos.

Hier ist mein Code -

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> 

Und das relevante 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; 
} 

Habe ich die div für das Logo innerhalb des div für die Ereignisse festlegen müssen? Jede Hilfe wäre willkommen.

Answer 1

Nun, Sie erstellen einen neuen Container für die Ereignisse in einer neuen Zeile innerhalb einer div, die sich über die 12 Spalten auf allen Bildschirmgrößen erstreckt.

Sie können weitere Details haben here, aber Zeilen in Bootstrap (ich nehme an, Sie verwenden Bootstrap) werden verwendet, um horizontale Gruppen von Spalten zu erstellen. Innerhalb Ihrer Zeile können Sie Elemente mit unterschiedlichen Breiten erstellen, indem Sie col-* verwenden (der Container ist in 12 Spalten unterteilt).

Was Sie tun können, ist Ihre in Ihrem row div Nest und spielen mit col-*, um das gewünschte Aussehen auf allen Bildschirmen zu erreichen. Vielleicht möchten Sie überprüfen, wie zu clearfix Spalten, die höher als andere auf kleinen Bildschirmen sind (siehe here).