Index.html.erb
<div class="pic__wrapper"> <div class="pic"> <div class="card__body"> < img="/post.image" class="posted_pic"> <div class="card__text"> <div class="card__title">post.post_title</div> <div class="card__user">post.user.nickname</div> </div> </div> </div> </div> <div>投稿する</div>
.pic__wrapper { display: flex; flex-wrap: wrap; } .card__body { display: flex; } .pic { width: calc((100vw - 40px) / 3); margin: 40px; } .posted_pic { margin-right: 20px ; margin-left: 20px ; width: 35vh; height: 35vh; margin-bottom: 8px; } .card__title { justify-content: center; text-align: center; font-weight: bold; font-size: 18px; margin-bottom: 8px; } .card__summary { font-size: 15px; margin-bottom: 20px; }
この状態ですと、下記の画像のように全ての項目が横並びになってしまいうまく表示させることができません。※ここの「ことり」はユーザー名、「テスト」はタイトルです。
画像、タイトル、投稿者の一まとまりで縦並び、その一まとまりごとに横並びにしたいのですが全てが横並びか全てが縦並びとなり理想の実装ができません。
card__bodyクラスにflexboxやinline flexなど入れたり他のクラスにもdisplay:flexなどをあててみたのですが、いずれもうまくいかず。。。
ご教授頂けますと幸いです。
どうぞ宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー