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

您可以在一个新行中为事件创建一个新容器，该div位于所有屏幕尺寸的12列中的div中。

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

您可以做的是将col-*嵌套在logosignin div中并与row一起玩，以在所有屏幕上实现您想要的效果。您可能想要在小屏幕上查看高于其他列的col-*列的内容（请参阅here）。

CSS - 将一个元素定位在另一个元素周围。互相漂浮

1 个答案: