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元素被设置为从其内容中获取宽度，并且该宽度对于它们来说都太大而无法放在同一条线上。此外，{div}之类的display: block元素默认情况下不会跳到同一行。通过设置元素的宽度并添加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>

如何在同一行上获得Materialise卡？

1 个答案: