テキストを書き込むと画像が縦になってしまいます

たくさん調べたのですが見つからなかったので質問致します
今日初めてteratailを使い始めたので画像の貼り方が分からないのですがお願い致します。

発生している問題

画像を横並びのままテキストを入れこみたいです。どうすればよろしいでしょうか？
→![イメージ説明](2adb06fdabdf399fb5f72c12301f4f25.png)


編集後のスクリーンショットです

![イメージ説明](f27b300c4fea53e68ca80e45dc026ed5.png)
![イメージ説明](5d6f053015defb05ba6f079b01e90e64.png)


ソースコード
<div id="waku">
<ul class="list">
        </ul>
    <img src="IMG_6318.JPG" alt=""width="350">

    <img src="IMG_5664.jpg" alt=""width="350">
     
    <img src="IMG_1256.jpg" alt=""width="350">
    <div class="text">文字を打つ</div>
     
    <img src="IMG_3243.JPG" alt=""width="350">
     <div class="text">文字を打つ</div>
    
    <img src="IMG_3264.JPG" alt=""width="350">
     <div class="text">文字を打つ</div>
      
    <img src="IMG_5963.jpg" alt=""width="350"> 
    </div>


css
div{ 
    position: fixed;
}

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

回答1件

ベストアンサー

以下のように、<img>と<div class="text">を
<div class="bbb">など、1つの要素でまとめる必要があります。

「画像を横並びに配置してその下にテキストを入れる」
というよりも、
「画像とテキストのグループを横並びに配置」
というほうが、理解しやすいと思います。

HTML
1<div class="aaaa">
2  <div class="bbbb">
3    <img src="IMG_6318.JPG" alt="" width="350">
4  </div>
5
6  <div class="bbbb">
7    <img src="IMG_5664.jpg" alt="" width="350">
8  </div>
9
10  <div class="bbbb">
11    <img src="IMG_1256.jpg" alt="" width="350">
12    <div class="text">文字を打つ</div>
13  </div>
14
15  <div class="bbbb">
16    <img src="IMG_3243.JPG" alt="" width="350">
17    <div class="text">文字を打つ</div>
18  </div>
19
20  <div class="bbbb">
21    <img src="IMG_3264.JPG" alt="" width="350">
22    <div class="text">文字を打つ</div>
23  </div>
24
25  <div class="bbbb">
26    <img src="IMG_5963.jpg" alt="" width="350">
27  </div>
28</div>

.aaaa、.bbbbなどは、こちらでてきとうにつけた名前なので、好きなクラス名に変更してください。

横並びに配置をしたいなら、CSSは以下のような形です。

CSS
1.aaaa {
2  display: flex;
3  flex-wrap: wrap; /* 横並びにしつつ、改行もしたいなら追加。1列で表示したいなら削除。 */
4}
5
6/* 不要なので削除。あらゆるところで"表示崩れ"が発生します。 */
7/*
8div{ 
9  position: fixed;
10}
11*/

ちなみに「なぜテキストをいれると縦並びになるか」という疑問に対しては、
「<div>は標準ではdisplay: block;なので、縦並びになる」、というのが答えになります。
(<img>は標準でdisplay: inline;なので横並びになります)

投稿2020/04/30 22:19

編集2020/04/30 22:39

new1ro

総合スコア4528

huubhi

2020/05/01 14:21

回答ありがとうございます！！　(私の使っているプラットフォームはBracketsです) 回答を全て(htmlとcss)コピーし貼り付けたのですが横にならず全て縦に表示されてしまいましたスクリーンショット 2020-05-01 16.07.46.png スクリーンショット 2020-05-01 15.52.41.png なぜなのでしょうか？お願いいたします汗

new1ro

2020/05/01 14:25 編集

テストとして、以下を追加してみてください。 .bbbb { flex: 0 0 40%; }

huubhi

2020/05/01 14:28

スクリーンショットが表示されますでしょうか？もし出ないのでしたら、どうやってスクリーンショットを表示するか教えていただきたいです。お願いいたします。

huubhi

2020/05/01 14:29

ありがとうございます。追加します。お待ちください

new1ro

2020/05/01 14:30

質問を編集して貼り付けてみてください

huubhi

2020/05/01 14:45

.bbbb { flex: 0 0 40%; } 追加しました。cssに記述しましたが、変わらず縦表示になってしまいます。スクリーンショット貼りましたのでご覧ください。

new1ro

2020/05/01 20:51 編集

↓CodePenで実装してみました。 https://codepen.io/new1ro/pen/vYNervz 質問を編集し、現状のHTMLと、CSSのソースコードをもう一度貼り付けてください。その際、ソースコードの上下に「```」を入力すると、ソースコードが見やすくなるので助かります (現状見づらいので、読む側がしんどいです...) ↓「```」の使い方の例。 ``` .bbbb { flex: 0 0 40%; } ```

huubhi

2020/05/04 10:34

ありがとうございます！解決しました。 display: inline-block;をhtmlに加えたら、画像が横で下にテキストが表示できましたのでご報告いたします。現状の私のコードです↓ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> .pic_frame { display: inline-block; text-align: center; } table { text-align: center; } </style> </head> <body> <div class="pic_frame"> <img src="IMG_1257.jpg" width="350"> <p>写真１の説明</p> </div> <div class="pic_frame"> <img src="IMG_1257.jpg" width="350"> <p>vvvvvvvvvv</p> </div> /body> </html>

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