写真３つを横並びにしたいのですが上手く効かなくて困っています。

Question

HTML
<div class="course-wrapper">
    <h3>コース一覧</h3>
    <div class="curse-contents">
      <div class="image">
        <img src="img/web_first.png">
        <p>HTML/CSS/Bootstrap</p>
      </div>
      <div class="image">
        <img src="img/web_second.png">
        <p>HTML/CSS/JavaScript/jQuery</p>
      </div>
      <div class="image">
        <img src="img/web_third.png">
        <p>PHP/WordPress</p>
      </div>
    </div>
  </div>

CSS
.image {
  display: inline-block;
}

Answer 1

「こうなってます！」っていう現状を画像でもいいので提示したり、
「こういう風にしたいんです！」っていうご希望をあわせて掲載すると、返答が来やすくなりますよ！
とりあえず、今ある情報でいくつか考えられる原因を挙げておきます。

①インラインブロック要素の横幅が設定されていない

現在.imageにdisplay: inline-block;を指定されていますが、
インラインブロック要素は、横幅が設定されていないと子要素に応じて自動で横幅が決まります。
おそらくpタグが画像より幅をとっていたりして、一部の画像が段落ちしてしまっているのではないでしょうか？

.imageの横幅を指定、中の画像がその幅いっぱいにひろがるよう記述しておけばうまく横並びしてくれると思います。

.curse-contents{
    text-align: center;
}
.image {
    display: inline-block;
    box-sizing: border-box;
    width: calc(100% / 3);
    padding: 0 10px;
}
.image img {
    width: 100%;
}

②タグ間の改行で余分な空白が入っている

.imageの閉じタグと、その次の.imageの開始タグの間をくっつけてやれば空白はなくなります。

<div class="course-wrapper">
    <h3>コース一覧</h3>
    <div class="curse-contents">
        <div class="image">
            <img src="img/web_first.png">
            <p>HTML/CSS/Bootstrap</p>
        </div><div class="image">
            <img src="img/web_second.png">
            <p>HTML/CSS/JavaScript/jQuery</p>
        </div><div class="image">
            <img src="img/web_third.png">
            <p>PHP/WordPress</p>
        </div>
    </div>
</div>

③そもそもインラインブロックで横並びさせるのが面倒

別の方もdisplay: flex;で記述されていますので、
フレックスボックスで横並びさせるのが手っ取り早いかもしれません。

.curse-contents{
    display: flex;
    justify-content: center;
}
.image {
    box-sizing: border-box;
    width: calc(100% / 3);
    padding: 0 10px;
}
.image img {
    width: 100%;
}

Comments

[panddd00]

本当に助かりました！ありがとうございます！！

Answer 2

.curse-contents{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.curse-contents .image{
  margin:0 10px;
}