将 div 与 rails 生成的循环水平对齐

Question

我正在尝试水平排列博客列表 post。但我不知道怎么办。我能够在创建静态模型时使用 css flexbox 实现我想要的结果，但是一旦我用 rails 循环替换占位符标签，布局就会中断并且所有 posts垂直排列。此外，在最后一个 post 的末尾下方，有一串文本，所有 post 的信息都漂浮在底部（见附图），不确定我在这里做错了什么。

下面是我的 html 和 css 设置：

  <section id="posts" class="wrapper">
    <h2>My Latest Articles</h2>
    <hr>

    <div class="post_container">
      <div class="article">
        <%= @posts.each do |p| %>
        <h3 class="post_title"><%= link_to p.title, p %></h3>
        <p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
        <p class="content"><%= truncate(p.content, length: 400)  %></p>
        <% end %>
      </div>
    </div>

CSS

#posts {
    padding: 6.5em 0 10em 0;
    h2 {
        text-align: center;
        color: $text;
        margin-bottom: 1.25rem;
    }

    .post_container {
        padding: 6em 0 6em 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .article {
            max-width: 28%;
        }
        .post_title {
            color: $text;
      font-size: 1.6em;
        }
        .post_date {
            padding: .75rem 0;
            color: $accent;
            font-size: 1.2em;
        }
        .content {
            color: $grey;
        }
    }
}

Answer 1

尝试用 div 包围循环内的所有内容。希望这对您有所帮助！

Answer 2

要删除帖子下方的信息字符串，您需要修改您的erb代码。

将 post_container div 更改为：

<div class="post_container">
  <div class="article">
    <% @posts.each do |p| %>
      <h3 class="post_title"><%= link_to p.title, p %></h3>
      <p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
      <p class="content"><%= truncate(p.content, length: 400)  %></p>
    <% end %>
  </div>
</div>

将 div 与 rails 生成的循环水平对齐

Align divs horizontally with rails generated loop

html

css

ruby-on-rails

horizontallistview