回答受付が終了しました

今webページを作っているんですが、写真の横に文字をもってくる方法がよくわかりません。 HTMLやcssを使っています。 よろしければ教えてください!

回答(4件)

0

テーブルを使えば簡単に並べられます。 <table> ... <td>ここに画像</td> <td>ここに文字</td> ... </table> ※文字と画像の順番を逆にする場合は、<td>の順番を逆転させてください

0

nsy********さん >・・・・写真の横に文字をもってくる方法・・・・・・・ 色々ありますが。 ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> span{ background:#efe; } .wrap1{ width:500px; margin:4px auto; } .wrap1 span{ display:inline-block; vertical-align:top; } .wrap2{ width:500px; margin:4px auto; display:flex; } .wrap3{ width:500px; margin:4px auto; display:grid; grid: 1fr / 120px 1fr; } .wrap4{ width:500px; margin:4px auto; } </style> </head> <body> <div class="wrap1"> <img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png"> <span>横に並べる 1<br>テキストテキストテキストテキストテキスト</span> </div> <div class="wrap2"> <img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png"> <span>横に並べる 2<br>テキストテキストテキストテキストテキスト</span> </div> <div class="wrap3"> <img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png"> <span>横に並べる 3<br>テキストテキストテキストテキストテキスト</span> </div> <table class="wrap4"> <tr> <td><img src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png"></td> <td>横に並べる 4<br>テキストテキストテキストテキストテキスト</span></td> </tr> </table> </body> </html>

1

画像とテキストの親要素にdisplay: flexを指定するとデフォルトで左右配置になります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> figure { display: flex } </style> </head> <body> <div> <figure> <img src="https://placehold.jp/150x150.png" alt=""> <figcaption>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん</figcaption> </figure> </div> </body> </html>

1人がナイス!しています

0

img{ display: block } こういうことですか?