在 Html 或 Css 中并排放置卡片（卡片显示）

Question

我的 html 代码需要一些帮助。

我似乎找不到我的两张卡片不想在我的页面中并排显示的原因。 我希望同时使两张卡片能够根据我的页面大小调整自己的大小。

我过去曾经做过，但使用的是来自 Materialise 的不同类型的卡片。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"  />

<div class="row">
  <div class="card blue-grey darken-1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="/Users/sarahgarson/Downloads/WhatsApp Image 2024-03-15 at 18.03.28 (1).jpeg" />
    </div>
    <div class="card-content">
      <span class="card-title activator white-text">Full-Stack Development Course<i class="material-icons right"
              >more_vert</i
            ></span
          >
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4"
            >A little bit about my Full-Stack Development Course:<i
              class="material-icons right"
              >close</i
            ></span
          >
          <p>
            (just to make the code shorter here...)
          </p>
          <p>
            (just to make the code shorter here...)
          </p>
        </div>
      </div>

      <div class="card blue-grey darken-1">
        <div class="card-image waves-effect waves-block waves-light">
          <img
            class="activator"
            src="/Users/sarahgarson/Downloads/WhatsApp Image 2024-03-15 at 23.03.21.jpeg"
          />
        </div>
        <div class="card-content">
          <span class="card-title activator white-text"
            >Mechanical Engineering Course<i class="material-icons right"
              >more_vert</i
            ></span
          >
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4"
            >A little bit about my Mechanical Engineering Course:<i
              class="material-icons right"
              >close</i
            ></span
          >
          <p>
            (just to make the code shorter here...)
          </p>
          <p>
           (just to make the code shorter here...)
          </p>
        </div>
      </div>
    </div>

Answer 1

嘿嘿。

通过在每张卡的代码中的 class="row" 下添加

<div class="col s12 m6">

找到了解决方案。

必须将 CSS 中的宽度设置为 1000 px，以使卡片大小合理，因为在我添加上面的代码后它变得非常小，但它确实将两张卡片并排放置，并且在较小的页面中仍然调整了两者的大小。 :)

无论如何，我很想知道是否有人有其他方法，哈哈