html - 如何让 Materialise 卡在同一行？

Question

我正在制作一个网页，它应该在同一行列出卡片，但我的代码却将它们一个一个地列为一列。

.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 如下(片段)

Answer 1

现在，您的 .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>