Html 我应该怎么做才能使我的箱子水平对齐？

我试着在每个div上执行

style=“display:inline block”

，但不起作用。请帮忙

这是我的HTML：

<div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img class="card-img-top" src="coding.jpg" />
              <div class="card-body">
                <h3>Coding</h3>
                <p class="card-text">This is my primary hobby. That's why I was able to create a lot of projects.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img class="card-img-top" src="guitar.jpg" />
              <div class="card-body">
                <h3>Guitar</h3>
                <p class="card-text">I love music. And one way I appreciate it is by playing guitar.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img class="card-img-top" src="coding.jpg" />
              <div class="card-body">
                <h3>Mandarin</h3>
                <p class="card-text">I learn Mandarin Chinese. I really like this language because of its intonation.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- hobby div -->

编码
这是我的主要爱好。这就是为什么我能够创建很多项目

吉他
我喜欢音乐。我欣赏它的一种方式是弹吉他

普通话
我学习普通话。我非常喜欢这种语言，因为它的语调

只需像这样将代码包装到父div中即可

    <div style="display:flex">
      // your current code

   </div>

//您当前的代码

您当前使用的

style=“display:inline block”

似乎适合我。 也许您应该检查元素的边距和填充，以确保有足够的空间将它们并排放置

编码
这是我的主要爱好

吉他
我喜欢音乐

在父div中给出样式

<div class="parent-div>
    <div class="child-div>

    </div>
    <div class="child-div>

    </div>
    <div class="child-div>

    </div>
</div>

或：

---

@泽德里克斯·法比安，如果这是一个结果，请你投票表决。非常感谢。

.parent-div {
    display: inline-block;
}
.child-div {
    width: 33%;
    height: 200 px;
}

.parent-div {
    display: flex;
    flex-wrap: wrap;
}