前提・実現したいこと
現在webアプリを開発中で, その中でレイアウトの問題にぶつかったため質問させていただきたいと思いました. タイトルのとおりなのですが, Railsで開発を行っており, テンプレのhtml.erb内でpタグの中に複数の要素を入れており, その中の一部分にだけcss(具体的にはtext-align)を適応したいです.
発生している問題・エラーメッセージ
エラーではないのですが, 現在の状況だと, pタグ内の全てに同じcssが適応されていますが, textalignだけは個別に(数種類)適応させたいのです.
該当のソースコード
show.html.erb
<div class="main posts-show"> <div class="container"> <div class="posts-show-item"> <p> <%= @post.dear %> *これにtext-align: left <br> <br> <%= @post.content %> *そのまま <br> <br> *試したことに書いておいた, pタグは各要素を挟む形でこんな感じで書きました.一つだけ例をあげるとこんな感じでやりました *<p class = "xxxx"> <%= @post.from %> ここに*text-align: right *</p> <br> <%= @post.created_at.to_s(:datetime_jp) %> ここに*text-align: right </p> </div> </div> </div>
posts.css
.posts-show form { display: inline; } .posts-show-item { padding: 30px; background-color: white; box-shadow: 0 2px 6px #c1ced7; overflow: hidden; background-image: url(/ocean-letter.jpeg); background-size: cover; background-repeat: no-repeat; } .posts-show-item img { width: 60px; height: 60px; border-radius: 40%; box-shadow: 0 2px 6px #c1ced7; vertical-align: middle; object-fit: cover; } .posts-show-item .post-user-name a { vertical-align: middle; font-size: 24px; margin-left: 15px; } .posts-show-item p { font-size: 20px; margin: 20px 0; color: #FF9933; background-image: linear-gradient(180deg, #FFEACE 99%, #ced4da 99%, #646464 100%); background-repeat: repeat-y; background-size: 100% 2.4em; line-height: 2.4; } .post-time { color:#FF9933; margin: 10px; text-align: right; background-image: repeating-linear-gradient( #FFEACE, #FFEACE calc(2.0rem - 3px), #ced4da calc(2.0rem - 1px), #ced4da 1.5rem, #FFEACE 1.5rem ); background-origin: content-box; background-clip: content-box; background-attachment: local; }
試したこと
Pタグを間に挟んだりはもちろんしたのですが,そうすると各要素(dear, content, fromのそれぞれの間)に空白ができてしまって, 思っているレイアウトにはならなくなってしまいました.
補足情報(FW/ツールのバージョンなど)
コード上に説明を書いたほうがイメージが共有されるかと思い少し書き込みがあります. *マークのところは, 書き込みですので, ゴチャついてしまっていますがご容赦ください. もし邪魔なら, 消しますので.
Ruby2.6.5, Rails 6.0
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/02 05:57