Question

我有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>

定位CSS中的最后一行

0 个答案: