img画像が横並びできない。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
img画像を横並びにしたいのにできない。

発生している問題・エラーメッセージ

img要素を横並びにしようと試行錯誤しているができない。

該当のソースコード

ＨＴＭＬ
<div class="buildings">
  <p>自社物件案内</p>
   <div class="bulidings-img">
     <p><img src="Port右から.JPG" alt="ビルの画像"></p>
     <p><img src="Port左から.JPG" alt="ビルの画像"></p>
     <p><img src="ゴルフ場.png" alt="ゴルフの画像"></p>
   </div>
</div>

ＣＳＳ
.buildings {
  background-color: #f1ede0;

}

.buildings-img {

}

.buildings-img p {
  width: 300px;
  

試したこと

.building-img　や　.building-img p に
widthの指定や、float: left; positionやdisplay
など試行錯誤しても横並びにならない。

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

できれば言語やファイルが別であればコードブロックもわけてください（任意数設置できます）

[RT2]

これで大丈夫ですか？
やり方がいまいち。。。

[mutsuki22]

ただ単に横並びにするだけならやり方自体はいくつかありますが、なにか条件はあったりするのですか？
例えば記載している<p>タグは残して欲しいなど・・・

[RT2]

条件はないです。始めたばかりで、float: left; をやっても、ｐ要素のwidthの幅を指定しても横並びになりません。

[m.ts10806]

そうですね。もう一歩としては冒頭部分は下記のようにすると良いです。言語名はブロック内ではなく冒頭で宣言するとコードハイライトがきき、コードが見やすくなります。
```HTML

```CSS

[mutsuki22]

直接の回答ではないのでこっちで。
HTMLとCSSのクラス名が違うのは質問記載のミスですか？
元のコードも違うなら、まずそこを直さないとCSSが適応されないですよ。
HTML→bulidings-img
CSS→buildings-img
になってます。

Answer 1

floatの指定をするなら、横並びにしたいものの親のタグに指定をする必要があります。
この場合は<div class="bulidings-img">です。

<p><img src="Port右から.JPG" alt="ビルの画像"></p> とありますが、<p>は不要かなと思います。

Comments

[RT2]

ありがとうございます！
いろいろとゴチャゴチャになってました。。。

[RT2]

p要素は画像の高さが様々なので揃えようとするために入れてみたのですが、検討違いですか？？？

[m-iwai]

なるほど、そういった用途ならあってもいいと思います。