Php 如何在一行中显示卡布局

我在网上搜索过，试图按照W3S学校的“简单”指示，使用卡片布局形式显示信息，但是，这些盒子只是一直在彼此下方，而不是一行。我相信这是因为我从数据库中提取所有值，而不是硬编码它们，但我不知道如何搜索此解决方案

卡片布局的顶部有一张图片，下面有一个名称和描述。我还想限制框的大小，使它们都是相同的，但在那一刻，它们都是随机大小，取决于文本，如果这是有意义的？如果你还不知道的话，我对编码还是比较陌生的

这是我的HTML/PHP代码：

<?php
      for ($i=0; $i < $num; $i++)
      { $row = $result->fetch_assoc(); ?>

<div class="row">

  <div class="column">

    <div class="card" id="center">

      <div class="profile-image"><img src="data:image/jpg;charset=utf8;base64,<?php echo base64_encode($row['photo']); ?>"/></div>
      <h3><?php echo $row["name"];?></h3>
      <h5><?php echo $row["type"];?></h5>
      <p><?php echo $row["nomination"];?></p>

    </div>
  </div>
  </div>

<?php }?>

---

首先，将行begin和end div移到php循环之外。因为行被设置为表，不允许列浮动到其他列的左侧。

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

    .card {
      width: 320px;
      padding: 20px;
      border: 1px solid #c9c9c9;
    }
    .card .profile-image {
      padding: 10% 10% 0;
    }

    .card .profile-image img {
      max-width: 100%;
      vertical-align: top;

      border-radius: 10%;
      max-width: 75%;
    }