html - 如何在同一个 div 中对齐这三张卡片？

Question

我正在尝试添加三个在较大容器内水平对齐的卡片 div。我将它们设置为 display: inline-block 但 div 杂乱无章且不在同一行。

我已经尝试使用内联和内联 block 设置，但都无法成功对齐三个 div。

.card {
  display: inline-block;
  width: 300px;
  height: 350px;
  margin: 0 0 0 0;
}

<div id="lowmid">
  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="./photos/oaxaca.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p style="color: black">Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>

  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="./photos/india.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p style="color: black">Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>

  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="./photos/za.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p style="color: black">Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>
</div>

尽管我将卡片 div 放在一个更大的容器中，给它们每个统一的大小，并将每个设置为 display: inline-，但卡片 div 没有对齐，而是在页面上困惑 block 。

请帮我对齐这三个卡片 div，以便它们可以水平对齐在同一行，在 id #lowmid

的 div 中

Answer 1

将 display:flex 添加到容器中。

#lowmid{
  display:flex;
}