html - 如何在同一行上获得实体化卡？

我正在制作一个网页，该网页应该在同一行上列出卡片，但是我的代码却以一列的形式将它们一张一张列出。

.card-content{
    text-align: center;
    font-weight: bold;
    } 

<div class="index-banner color2">
    <div class="section">

    <!--this is a card, starter hacks card-->
      <div class="row">
    <div class="col s3 m2">

      <div class="card">
        <div class="card-image">
          <img src=https://s3.amazonaws.com/assets.mlh.io/events/splashes/000/000/623/thumb/starterhacks_splash.png?1486582691>
          <a href="starterhacks.html" class="waves-effect waves-light btn">Info</a>
        </div>
        <div class="card-content">
          <h5>StarterHacks</h5>
          <h6>March 11th - 12th</h6>
          <h6>Waterloo, ON</h6>
        </div>
      </div>

    <div class="card">
    <div class="card-image">
      <img src=https://s3.amazonaws.com/assets.mlh.io/events/splashes/000/000/622/thumb/ruhacks_splash.png?1486573836>
      <a href="#!" class="waves-effect waves-light btn">Info</a>
    </div>
    <div class="card-content">
      <h5>RU Hacks</h5>
      <h6>March 17th - 8th</h6>
      <h6>Toronto, ON</h6>
    </div>
    </div>
    </div>
    </div>

我将如何格式化一张又一张列出的卡片？我是HTML的新手，因此如果答案很明显，我深表歉意。
谢谢！

编辑：为此，我拥有的CSS是以下代码段（在代码段中）

最佳答案

现在，您的.card元素已设置为从其内容中获取其宽度，并且该宽度太大，以至于它们都无法容纳在同一行上。此外，默认情况下，display: block元素（例如div）将不会跳到同一行。通过设置元素的宽度并添加float: left，可以使卡彼此水平对齐。

.card {
    width: 50%;
    float: left;
}
.card-content{
    text-align: center;
    font-weight: bold;
    }

<div class="index-banner color2">
    <div class="section">

    <!--this is a card, starter hacks card-->
      <div class="row">
    <div class="col s3 m2">

      <div class="card">
        <div class="card-image">
          <img src=https://s3.amazonaws.com/assets.mlh.io/events/splashes/000/000/623/thumb/starterhacks_splash.png?1486582691>
          <a href="starterhacks.html" class="waves-effect waves-light btn">Info</a>
        </div>
        <div class="card-content">
          <h5>StarterHacks</h5>
          <h6>March 11th - 12th</h6>
          <h6>Waterloo, ON</h6>
        </div>
      </div>

    <div class="card">
    <div class="card-image">
      <img src=https://s3.amazonaws.com/assets.mlh.io/events/splashes/000/000/622/thumb/ruhacks_splash.png?1486573836>
      <a href="#!" class="waves-effect waves-light btn">Info</a>
    </div>
    <div class="card-content">
      <h5>RU Hacks</h5>
      <h6>March 17th - 8th</h6>
      <h6>Toronto, ON</h6>
    </div>
    </div>
    </div>
    </div>

关于html - 如何在同一行上获得实体化卡？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42748584/