时间戳

首页 > 解决方案 > 我应该怎么做才能让我的盒子水平对齐？

html - 我应该怎么做才能让我的盒子水平对齐？

问题描述

我尝试style="display: inline-block"在每个 div 上执行此操作，但它不起作用。请帮忙。

在此处输入图像描述

这是我的 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 -->

标签： htmlcssbootstrap-4

解决方案

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

推荐阅读