画像　文字を横ならびにしたい

##　解決したいこと

画像　文字　画像　文字　文字
(最初の画像にはリンクを付けたい)
の順番に横一列に表示したいです。

お願い致します。

試したこと

<div class="box"><a href="https://◯◯.jp"><img src="/images/◯◯.png" align="middle"></a>
アイウエオ

のように　align="middle" 付けてみたり float: left; に置き換えたりしたのですが、うまく文字が横に並びません。

x_x

2019/03/15 06:33

試したことはないのでしょうか？

mutsuki22

2019/03/15 06:33

現状のコードはないんですか？ないならただの丸投げですよ。

退会済みユーザー

2019/03/15 06:36

現状のコードがありません。わからないので試してもいません、、。

x_x

2019/03/15 06:39

うーん、試したら問題なんてなかった……ということもあり得ますよ？何が問題かわからないので答えるのも難しいです。

mutsuki22

2019/03/15 06:40

HTMLとCSSの基本知識はあるなら「css　横並び」辺りで一度検索をしてみては？それでやってみて上手くいかない場合はそのコードを提示頂ければベストかと思います。

退会済みユーザー

2019/03/15 06:44

今書きました。

mutsuki22

2019/03/15 06:50

基本的には下記は参考サイトです。下記を一度参考に作ってみても駄目ですか？提示頂いたコードではなんとも言えません。 https://qiita.com/yukinaka/items/c4fcb7f0878702485f70 https://qiita.com/HiromuMasuda0228/items/baf8015076d7d90b8fea

Lhankor_Mhy

2019/03/15 08:08

ご提示のコード、div が閉じてないですが、この後に閉じタグが来る感じですか？

yoshinavi

2019/03/15 11:38

質問としての形をとれるようにヘルプ等や、他の質問等を参考にしてみてください。

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

回答2件

画像はinlineに書けるので普通に列記すれば横並びになりますが
なにを聞きたいのでしょうか？

HTML
1<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1" class="alt_text" alt="あああ">
22
3<img src="https://placehold.jp/00ff00/ff00ff/300x200.png?text=3" class="alt_text" alt="いいい">
44
55

投稿2019/03/15 06:47

yambejp

総合スコア114843

画像はデフォルトでインラインなので普通に書けば普通に横並びになります。

html
1<p>
2  <a href="http://example.com">
3    <img src="http://placehold.jp/150x150.png?text=画像">
4  </a>
5  文字
6  <img src="http://placehold.jp/150x150.png?text=画像">
7  文字　
8  文字
9</p>