我有2列设计,我试图在右侧定位最后一个元素,在底部最后一个元素,这样我就可以删除边距。
我知道怎么做。这是我使用的方式:
.connection-container:nth-child(2n){ margin-right: 0; }
.connection-container:nth-child(2n+1):nth-last-child(-n+2),
.connection-container:nth-child(2n+1):nth-last-child(-n+2) ~ .connection-container{
margin-bottom: 0; /* Remove the margin of last 2 elements */
}
此方法有效。但问题是我有另一个div,这是标题。由于这个标题,这段代码不起作用。
.section-container.clearfix
.section-title= 'Connections'
- if @profile.friends.size > 0
- @profile.friends.each do |friend|
.connection-container.clearfix.pull-left
.connection-photo.pull-left
= image_tag friend.photo.url(:thumb)
.connection-details.pull-left
.connection-info= link_to "#{friend.first_name} #{friend.last_name}", profile_path(friend.id)
.connection-info= friend.school
.connection-info= friend.program
.connection-buttons.pull-left
= display_connections_buttons(friend)
如何使这个css代码与标题一起使用?我做了很多尝试,但没有工作。
谢谢。
修改
<div class="section-container clearfix">
<div class="section-title">Connections</div>
<% if @profile.friends.size > 0 %>
<% @profile.friends.each do |friend| %>
<div class="connection-container clearfix pull-left">
<div class="connection-photo pull-left">
<%= image_tag friend.photo.url(:thumb) %>
</div>
<div class="connection-details pull-left">
<div class="connection-info">
<%= link_to "#{friend.first_name} #{friend.last_name}", profile_path(friend.id) %>
</div>
<div class="connection-info">
<%= friend.school %>
</div>
<div class="connection-info">
<%= friend.program %>
</div>
</div>
<div class="connection-buttons pull-left">
<%= display_connections_buttons(friend) %>
</div>
</div>
<% end %>
<% end %>
</div>