同じClassの３つの要素を横並びに表示したい

Question

おそらく、float: left;やdisplay:inline;を使えば横並びにできるとは思うのですが、現状下記の様な状態になっております。

上記イメージの
○○店
address: XXXX
hours: XXXX
phone: XXXX
holiday: XXXX

の部分を横並びにしたいのですが、この状態から横並びにしようとするとうまくいきません。

   <div class="salon_price">
      <div class="container-fluid">
        <div class="contents-area04">
          <h1>SALON / PRICE</h1>
          <div class="picture">
            <img src="/assets/hair_salon04-910b298c6b5b12f4ab7f6b63935548be687ef31651b7e7fd54f86eb3b1198214.jpg" alt="Hair salon04" />
            <img src="/assets/hair_salon05-4aa25395089c6835758e4e3127fd258707f4a37177d9a4b1748893be3f7da42d.jpg" alt="Hair salon05" />
            <img src="/assets/hair_salon06-a39d033aa9de76de0fe04c86f47dabb5e10bf421c35b1b2b12eb2a238731997b.jpg" alt="Hair salon06" />
          </div>
          <div class="text-contents">
            <h2>○○店</h2>
            <p>address: XXXX</p>
            <p>hours: XXXX</p>
            <p>phone: XXXX</p>
            <p>holiday: XXXX</p>
          </div>
          <div class="text-contents">
            <h2>○○店</h2>
            <p>address: XXXX</p>
            <p>hours: XXXX</p>
            <p>phone: XXXX</p>
            <p>holiday: XXXX</p>
          </div>
          <div class="text-contents">
            <h2>○○店</h2>
            <p>address: XXXX</p>
            <p>hours: XXXX</p>
            <p>phone: XXXX</p>
            <p>holiday: XXXX</p>
          </div>
        </div>
      </div>
    </div>

.salon_price{
  height: 500px;
  text-align: center;
}

  .picture{
    img{
      max-height: 200px;
      margin: 0 20px;
    }
  }
  .text-contents{
    width: 80%;
    display: inline-block;
   }

何かわかる方いらっしゃいませしたら、アドバイス頂けないでしょうか。
よろしくお願いいたします。

【追記】
float: left;を使ってもdisplay: inline-block;同様に縦に並んだ状態になってしまいます。

Answer 1

どの要素をインラインにしたいのかをうまく指定できていないように思います。
.text-contents * { display: inline; }
h2要素やp要素はデフォルトでブロック要素なので、その親がインラインであってもこれらの要素はインラインにはなりません。

Comments

[tky31]

ありがとうございます。
解決いたしました。
width:80%;が原因でfloat: left;もdisplay: inline;も出来なかった様です。

Answer 2

width: 80%;をwidth: 33%;にしても同じですか？

Comments

[tky31]

ありがとうございます！
おっしゃる通り、width:80%;をwidth: 3３%;に変更したら思っていた通りの挙動になりました！
指定幅がひろすぎたんですね…

Answer 3

ご自身で最初から書かれているとおりfloat:leftしてはいけないのでしょうか？

.text-contents{float:left;}

Comments

[tky31]

float: left;も試してみましたが、同じ状況になってしまいます。
説明不足で申し訳ございません。
何か考えられる原因ございますでしょうか。