我应该怎么做才能让我的盒子水平对齐？ [复制]答案

【问题标题】：What should I do to get my boxes horizontally aligned? [duplicate]我应该怎么做才能让我的盒子水平对齐？ [复制]
【发布时间】：2020-06-08 16:42:36
【问题描述】：

我尝试在每个 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 -->

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

只需像这样将您的代码包装到父 div 中。

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

   </div>

【讨论】：

@Zeddrix Fabian 你能不能给这个赞一下，如果这很有成果的话。谢谢！！

【解决方案2】：

您当前使用的style="display: inline-block" 似乎对我有用。也许您应该检查元素的边距和填充，以确保有足够的空间来并排放置它们。

<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">
              <div style="width:100px;height:100px;background-color:gray"></div>
              <div class="card-body">
                <h3>Coding</h3>
                <p class="card-text">This is my primary hobby..</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">
              <div style="width:100px;height:100px;background-color:gray"></div>
              <div class="card-body">
                <h3>Guitar</h3>
                <p class="card-text">I love music.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">

【讨论】：

【解决方案3】：

在父 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;
}

【讨论】：