画像を3つ横並べにしたいのに、出来ない

float:left;で画像を三つ横並べにしたいのですが
どうしても縦に並んでしまいます。

該当のソースコード

<div class="image>
<img src="#">
<p></p>
</div>
<div class="image>
<img src="#">
<p></p>
</div>
<div class="image>
<img src="#">
<p></p>
</div>
CSS

.image{
float:left;
width:33%
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
各imageクラスの終わりに
clearを入れてcssでbothで解除してみましたが上手くいきません。

yoorwm

2018/10/12 10:06

HTMLレベルで正しいコードになっていなくないですか？

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

回答2件

普通にいけませんか？

HTML
1<style>
2.image{
3float:left;
4width:33%
5}
6</style>
7<div class="image">
8<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1" alt="1">
9<p></p>
10</div>
11<div class="image">
12<img src="https://placehold.jp/00ff00/ff00ff/300x200.png?text=2" alt="2">
13<p></p>
14</div>
15<div class="image">
16<img src="https://placehold.jp/0000ff/ffff00/100x80.png?text=3" alt="3">
17<p></p>
18</div>