複数投稿するとレイアウトが崩れる原因を知りたい

Question

現在投稿後に、トップページに表示させる実装をしているのですが、1投稿目のレイアウトが2投稿目の子要素として表示されてしまいます。

すべての投稿が縦にズレることなく表示させるにはどのようにレイアウトを修正すればよろしいでしょうか。

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

具体的には、下記の画像のようになります。

https://gyazo.com/2990e199fde01906518a7ad501eb5fc3

**<div class="content-page">に投稿されたものが表示されるようにしているのですが、1枚目の投稿が2枚目に投稿された<div class="content-page">**の子要素として表示されているためにレイアウトにズレが起きてしまっております。

<div class="content-page">
 <div class="upload-contents-wrapper">..</div>
 <div class="content-page">...</div>
</div>

該当のソースコード

app/views/uploads/index.html.erb

<%= render "shared/header" %>

  <div id class="main-page">
    <div class="search-content">
      <form method="get" action="#" class="search_container">
        <input type="text" size="75" placeholder="　タグや地名で検索">
        <input type="submit" value="&#xf002">
      </form>
    </div>
    <div class="title-content">
      <h1 class="main-title">新規カフェ情報一覧</h1>
    </div>
    <div class="main-content">
      <div class="main-content__category">
        <!--      後から実装-->
      </div>
      <div id="content-table">
        <% @uploads.each do |upload| %>
          <div class="content-page">
            <%= link_to upload_path(upload.id), class: "upload-link", method: :get do %>
              <div class="upload-contents-wrapper">
                <div class="upload-img-contents">
                  <%= image_tag upload.image, class: "upload-img" if upload.image.attached? %>
                </div>
                <div class="upload-contents-detail">
                  <div class="upload-name"><%= upload.title %></div>
                  <% upload.tags.each do |tag| %>
                    <div class="upload-tags">#<%= tag.name %></div>
                  <% end %>
                </div>
                <div class="upload-contents-explain">
                  <div class="upload-explain"><%= upload.text %></div>
                </div>
                <p class="upload-user">
                  <a class="user-name__image" href="#">
                    <img src="assets/image-4.jpg" width="40" height="40" alt="">
                  </a>
                  <%= link_to upload.user.name, "#", class: "upload-user__name" %>
                </p>
              </div>
            <% end %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
  <%= link_to('uploads/new', class: 'uploads-btn') do %>
    <%= image_tag 'post.png', size: '70x70', class: "uploads-btn-icon" %>
  <% end %>
</div>

app/assets/styesheets/uploads/index.scss

////// Place all the styles related to the uploads controller here.
////// They will automatically be included in application.scss.
////// You can use Sass (SCSS) here: https://sass-lang.com/
$white: white;
$black: black;

//スライドページ

*:focus {
  outline: none;
}

#top-container {
  height: 450px;
  padding: 10px 0;
  overflow: hidden;
  background: #BBBBBB;
  position: relative;
}

.top-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}

.top-slide {
  width: 630px;
  height: 100%;
  float: left;
  background: $white;
  margin: 0 4px;
  z-index: 1;
}

.top-image {
  height: 260px;
  overflow: hidden;
  background-color: $white;

  & > img {
    height: 100%;
    width: 100%;
  }
}

.projects-detail {
  padding: 18px 20px 20px;
  background-color: $white;
  position: relative;
}

.icon-name {
  text-align: center;
  width: 100%;
  font-weight: 600;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;

  &__style {
    font-size: 25px;
    color: black;
    font-weight: bold;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, white 50%);
    background-position: 0 0;
    background-size: 200% auto;
    transition: 0.5s;
    text-decoration: none;

    &:hover {
      background-position: -100% 0;
      color: cadetblue;
    }
  }

  &__tag {
    border: 2px solid;
    color: grey;
    border-radius: 40%;
    padding: 10px 10px;
  }
}

.user-name {
  padding-left: 40px;
  font-weight: 300;
  bottom: 20px;
  line-height: 10px;
  display: flex;

  &__detail {
    margin-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: $black;
    display: inline-block;
    position: relative;
    line-height: 40px;
    text-decoration: none;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, white 50%);
    background-position: 0 0;
    background-size: 200% auto;
    transition: 0.5s;

    &:hover {
      background-position: -100% 0;
      color: cadetblue;
    }

    &::after {
      position: absolute;
      bottom: -4px;
      left: 0;
      content: '';
      width: 100%;
      height: 2px;
      background: #333;
      transform: scale(0, 1);
      transform-origin: left top;
      transition: transform .3s;
    }

    &:hover::after {
      transform: scale(1, 1);
    }
  }

  &__image {

    & > img {
      border-radius: 50%;
      text-decoration: none;
    }
  }
}

//検索フォーム

.search-content {
  padding: 48px 40px;
  align-items: center;
  display: flex;
}

.search_container {
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  display: block;
  padding: 3px 10px;
  border-radius: 20px;
  height: 2.2em;
  width: 400px;
  overflow: hidden;
  background: #3879D9;
}

.search_container input[type="text"] {
  border: none;
  height: 2.0em;
  background: #3879D9;
}

.search_container input[type="text"]:focus {
  outline: 0;
}

.search_container input[type="submit"] {
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 1.3em;
  border: none;
  background: none;
  color: #fff;
  position: absolute;
  height: 2.5em;
  right: 8px;
  top: -10px;
  outline: none;
}

.search_container ::-webkit-input-placeholder {
  color: #fff;
}

//メイン投稿一覧

.title-content {
  display: flex;
}

.main-title {
  display: block;
  margin: 0 auto;
}

.main-content {
  display: flex;
  width: 850px;
  margin: 0 auto;

  &__category {
    padding-right: 30px;
    background-color: beige;
    width: calc(900px - 650px);
  }
}

.content-page {
  width: calc(900px - 250px);
  padding: 20px 20px;
  background-color: bisque;
  height: 480px;
}

.upload-link {
  text-decoration: none;
  color: black;
}

.upload-contents-wrapper {
  width: 100%;
  height: 100%;
  background-color: white;
  filter: drop-shadow(0px 0px 10px black);
}

.upload-img-contents {
  height: 250px;
}

.upload-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.upload-contents-detail {
  padding: 15px 12px;
  display: flex;
  justify-content: space-between;
}

.upload-name {
  font-size: 25px;
  font-weight: bold;
  margin-left: 20px;
}

.upload-tags {
  border: 1px solid gray;
  border-radius: 10%;
  padding: 8px 8px;
  background: lightgoldenrodyellow;
  color: gray;
  font-weight: bold;
  font-size: 15px;
}

.upload-contents-explain {
  padding: 15px 12px;
}

.upload-explain {
  margin-left: 20px;
  color: gray;
  font-size: 15px;
}

.upload-user {
  margin: 15px 25px 5px;

  &__name {
    text-decoration: none;
    font-weight: bold;
    margin-left: 5px;
    color: black;
  }
}
//投稿ボタン

.uploads-btn {
  width: 100px;
  background: #F7F7F7;
  text-align: center;
  border-radius: 5%;
  bottom: 32px;
  right: 32px;
  position: fixed;
  padding: 15px;
}

試したこと

・** <% @uploads.each do |upload| %>の内部に<div class="content-page">**を置いてブラウズで確認してみたが、ズレの修正には至らなかった。

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

開発環境
・rubymine
・ruby(3.0.1)
・Ruby on rails (6.1.3.1)

Answer 1

        <% @uploads.each do |upload| %>
          <div class="content-page">
            <%= link_to upload_path(upload.id), class: "upload-link", method: :get do %>

なのに

            <% end %>
          <% end %>

だから、閉じるdivが足りない

Comments

[yuu0000]

ご連絡頂き誠にありがとうございます！

ご指摘頂いたとおりに修正してみたところ修正できました。
初歩的な確認ミスでした。

お忙しいところありがとうございました！

Answer 2

初歩的なミスでしたが、endで要素同士を囲むことができていないことが原因でした。