実現したいこと
ブラウザでは画像の左にテキスト、メディアクリエでは画像の下にテキストを入れたいです。
前提
画像の下に入れることはできたのですが、テキストが途中で改行されてしまいます。
html
1 <div id="genninn" class="container"> 2 <div class="genninn-title">タイトル</div> 3 4 <div class="gnn-imtx" > 5 <div class="genninn-img"><img src="img/sample1.jpg" alt""></div> 6 <p class="genninn-text tx1">テキストテキストテキストテキスト<p> 7 <p class="genninn-text tx2">テキストテキストテキストテキスト</p> 8 <p class="genninn-text tx3">テキストテキストテキストテキスト</p> 9 </div> 10 </div>
css
1.gnn-imtx { 2 display: flex; 3} 4 5.genninn-img { 6 position: absolute; 7 width: 30vw; 8 height: 20vw; 9 top: 11vw; 10 left: 60.vw; 11} 12 13.genninn-text { 14 width: 44%; 15 position: absolute; 16 top: 11vw; 17 left: 10vw; 18 font-size: 2vw; 19} 20 21@media (max-width: 1024px) { 22.genninn-img { 23 width: 76.8vw; 24 height: 51.2vw; 25 top: 15.52vw; 26 left: 11vw; 27} 28 29.genninn-text { 30 font-size: 3.36vw; 31 left: 13vw; 32} 33 34.tx1 { 35 top: 69vw 36} 37 38.tx2 { 39 top: 80vw 40} 41 42.tx3 { 43 top: 95vw 44} 45 46.gnn-imtx { 47 display: block; 48} 49 50} 51
試したこと
display: block;を入れてみましたが変化はなかったです。
初心者で検索しながら使えそうなコードを見て書いているため、ごちゃごちゃしています。
質問見ていただきありがとうございます。
現物ではないですが、こんな感じで画像の途中で改行されます。画像の幅いっぱいで改行されるようにしたいです。

回答1件
あなたの回答
tips
プレビュー