投稿したコメントを別々に表示したい

初学者の為、足りない部分の情報がありましたらご指摘お願いします。

前提・実現したいこと

現在、簡単なチャット機能をrailsで作っています。
コメントをした時にコメントが別々に表示されるようにしたいです。

また、別々に表示するためには、部分テンプレート？render?の
実装するといいのでしょうか？

####見本

発生している問題・エラーメッセージ

別々にならず、一つの枠の中にコメントが入る

####現状
![

該当のソースコード

###application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Blogmini</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      <style type="text/css" href="./blogs.scss"></style>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>         
  </head>
  <body>
<body>
    <nav class= "green accent-2">
        <div class="nav-wrapper">
          <a href="#" class="brand-logo">blog</a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="sass.html">NEW</a></li>
            <li><a href="badges.html">ログイン</a></li>
            <li><a href="collapsible.html">ログアウト</a></li>
          </ul>
        </div>
      </nav>
<script type="text/javascript" src="./app.js"></script>

    <%= yield %>

  </body>
</html>

###index.html.erd

<div class="main">
  <div class="main-set">
    <div class="card">
      <div class="card-hi"></div>
        <% @tweets.each do |tweet| %>
         <p><%= simple_format(tweet.text) %></p>
        <% end %>
      <div class="card-row"></div>
    </div>
  </div>
</div>

###application.CSS

.main{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.main-set{
  margin-left: 25%;
  width: 50%;
}

.card{
  position: relative;
  margin: .5rem 0 1rem 0;
  background-color: #f44336;
  border-radius: 2px;
}

.card-hi{
  // padding: 24px;
}

.card-row{
  border-top: 1px solid rgba(160,160,160,0.2);
  position: relative;
  padding: 16px 24px;
}

.contents.row{
  width: 50%;
  margin-left: 25%;
}

h6{
  padding-top: 50px;
  text-align: center;
}

textarea{
  width: 50%;
  margin-left: 25%;
}

試したこと

renderを使った部分テンプレート

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/10/24 08:23

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Rick_darts

2019/10/24 09:05

ご指摘ありがとうございます。以降気をつけます！

行動規範の内容に同意します

回答1件

ベストアンサー

erb
1<div class="card">
2  <div class="card-hi"></div>
3  <% @tweets.each do |tweet| %>
4    <p><%= simple_format(tweet.text) %></p>
5  <% end %>
6  <div class="card-row"></div>
7</div>

一つのカード内でループさせているからじゃないですか？

erb
1<% @tweets.each do |tweet| %>
2  <div class="card">
3    <div class="card-hi"></div>
4    <p><%= simple_format(tweet.text) %></p>
5    <div class="card-row"></div>
6  </div>
7<% end %>