画像の下に文字を入れたい

画像の下に文字を表示したいのですが、
どうやっても画像の横に表示されてしまいます。

index.html.haml
1.wrapper
2  .main
3    - @posts.each do |post|
4      .contents
5        .contents__item
6        = image_tag post.image.url, class: "post-image", :size =>'300x200'
7        .content-title       
8        = post.name

css
1.wrapper{
2  background-image: image-url("DSC_1372.jpg");
3  height: 100vh;
4  width: 100vw;
5  overflow: scroll;
6  .main{
7    display: flex;
8    flex-wrap: wrap;
9    .contents{ 
10      display: flex;
11      flex-wrap: wrap;
12      font-size: 20px;
13      color: white;
14      margin-top: 50px;
15      margin-bottom: 10px;
16      &__item{
17        margin-left: 100px;
18        .post-image{
19          border: 1px solid white;
20        }
21        .content-title{
22          background-color: rgba(32, 30, 30, 0.418);
23          margin-bottom: 10px;
24          margin-top: -10px;
25        }
26      }
27    }
28  }
29}

画像とテキストを配列にせずにどこに当てるかレイアウトを決めた時はしっかりと表示されていました。

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

回答1件

ベストアンサー

= image_tag と = post.name の前に半角 2 スペースを加えて HTML に出力された後に <div class="contents__item"> と <div class="content-title"> の子要素になるように書き換えてあげれば修正されるのではないでしょうか。

.wrapper
  .main
    - @posts.each do |post|
      .contents
        .contents__item
          = image_tag post.image.url, class: "post-image", :size =>'300x200'
        .content-title       
          = post.name

修正前に吐き出されるHTML

<div class="wrapper">
  <div class="main">
    <% @posts.each do |post| %>
      <div class="contents">
        <div class="contents__item"></div>
        <%= image_tag post.image.url, class: "post-image", :size =>'300x200' %>
        <div class="content-title"></div>
        <%= post.name   %>
      </div>
    <% end %>
  </div>
</div>

画像とテキストが入れ子になっておらず、画像もテキストもインライン要素扱いになるため、並んで表示されてしまう。

修正後に吐き出されるHTML

<div class="wrapper">
  <div class="main">
    <% @posts.each do |post| %>
      <div class="contents">
        <div class="contents__item">
          <%= image_tag post.image.url, class: "post-image", :size =>'300x200' %>
        </div>
        <div class="content-title">
          <%= post.name %>
        </div>
      </div>
    <% end %>
  </div>
</div>

画像とテキストが入れ子になっているので、画像の下にテキストが表示される。

投稿2020/07/15 03:14