レールを生成してdivを水平に整列させるループ

Question

私はブログ投稿のリストを水平にレイアウトしようとしています。しかし、私はどのように知りません。静的モックアップの作成時にCSSフレックスボックスを使用したかった結果を得ることができましたが、プレースホルダタグをrailsループに置き換えると、レイアウトが破損し、すべてのポストが垂直に並んでいます。また、最後の投稿の終わりの下には、このテキスト列がすべての投稿情報が下に浮かんでいます（添付写真参照）。ここで何が間違っていたのかはわかりません。以下は

私の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のdivとループ内のすべてを囲む

#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

投稿の下にある情報の文字列を削除するには、erbコードを変更する必要があります。これに

変更post_container DIV： `.article` divのにflex`：

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

Answer 2

してみてください。お役に立てれば！