(はてなブログ）画像にキャプション付けると、スマホのサイトだと画像が勝手に改行して表示する

画像にキャプションを付けてそれを複数並べてようとしています。
はてなブログ内でこのソースコードを記述したのですが、
パソコンのサイトは何の問題もなく表示されるのですが、
スマフォのサイトでは画像のサイズに関係なく、2，3枚目の画像が下に勝手に改行してしまいます。

スマフォサイトでキャプション付きの画像を複数並べるときの
定石ってあるのでしょうか。
はてなブログでスマフォサイトとパソコンサイトに両方とも
パソコンサイトに対応させる設定があったのですが、適応させても全く反応しないので、コードで解決しようとしています。
最終的にはPCサイトで表示されている通りの並びをそのままスマフォサイトに適用させたいです。
image image image
caption caption caption
って表示されていたら、スマフォでも同様にその並びで表示されるようにしたいです。(縮小してもかまいません。)PCサイト版で表示されているものをスクショして
もとのところを消して貼り付ける程度の方法しか思い浮かびません。
なんとかコードで解決したいです。
回答お願いします。

html
1<div class="imagearea">
2<figure><img src="" alt="写真" width="141" />
3<figcaption></figcaption>
4<figcaption></figcaption>
5<figcaption></figcaption>
6
7</figure>
8<figure><img src="" alt="arrow" width="80" />
9<figcaption></figcaption>
10
11</figure>
12<figure><img src="" alt="えええ写真" width="183" />
13<figcaption>  </figcaption>
14</figure>
15</div>

下のソースコードがcssのものです。
※はてなブログだとダッシュボードの選択画面でしかcssファイルを編集することができません。styleタグをhtml中に記述すると自動的にコメントアウトされます。

css
1
2<style>
3figure {
4    float: left;             /* 左に寄せて後続を右に回り込ませる */
5    margin: 0px 3px 3px 0px; /* 外側に余白を加える(右に7px・下に7px) */
6   /* 背景色 */
7}
8figure img {
9    display: block;          /* 余計な余白が出ないようにする */
10    margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
11}
12figcaption {
13    font-size: 0.9em;        /* 文字サイズを90%に */
14    text-align: center;      /* 中身をセンタリング */
15}
16div.imagearea:after {
17    content: "";      /* ※Clearfix */
18    clear: both ;
19    display: block;
20}
21</style>

#追記1
修正コード(idを付けたもの)

<div id="gazou">
<figure id="gazou"><img id="gazou" src="" alt="" width="200" />
<figcaption>figcaption</figcaption>
</figure>
<figure id="gazou"><img id="gazou" src="" alt="" width="200" />
<figcaption>figcaption</figcaption>
<figcaption></figcaption>
</figure>
<figure id="gazou"><img id="gazou" src="" alt="" width="200" />
<figcaption>figcaption</figcaption>
</figure>
<figure id="gazou"><img id="gazou" src="" alt="" width="200" />
<figcaption>figcaption</figcaption>
</figure>
</div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<style><!--
div#gazou {
	display: flex;
}
figure#gazou{
  margin: 3px;
}
figure img#gazou {
	display: block;
	width: 100%;
	max-width: 100%;
}
figcaption{
    text-align: center;
}
--></style>

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

回答1件

ベストアンサー

flexとか。

CSS
1div {
2	display: flex;
3}
4figure {
5  margin: 3px;
6}
7figure img {
8	display: block;
9	width: 100%;
10	max-width: 100%;
11}
12```**動くサンプル：**[https://jsfiddle.net/5w6abvtx/](https://jsfiddle.net/5w6abvtx/)
13
14---
15
16【よこ並びのCSS。】
17[http://lopan.jp/layout/](http://lopan.jp/layout/)
18
19【よこ並びのCSS。フレキシブルボックスレイアウトでよこ並び】
20[https://lopan.jp/flexible-layout/](https://lopan.jp/flexible-layout/)