如何使用 Materialise CSS 响应式堆叠卡片？答案

【问题标题】：How to stack cards responsively with Materialize CSS?如何使用 Materialise CSS 响应式堆叠卡片？
【发布时间】：2017-12-06 17:42:26
【问题描述】：

我正在尝试在 Materialise CSS 中构建一个布局，其中包含许多属于响应式布局的卡片：四张卡片在大显示器 (col l3)、两张在中 (col m6) 和一张在小显示器 (col s12) .

不幸的是，我无法让它们垂直堆叠而没有间隙，即使它们的宽度相同：https://jsfiddle.net/wdvq57rp/。

Large Layout Gaps -> Image

.card-panel {
  margin: 10px;
  padding: 10px;
}

.container {
  margin: 0;
  max-width: 100%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
  <h1>Stacked-Cards Test</h1>

  <div class="row card-container">

    <!-- Test Cards -->
    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>

    <div class="col l3 m6 s12">
      <div class="card-panel grey lighten-4">
        <h5>Title</h5>
        <p>Description</p>
        <div>
          <p><a href="#" class="pink-text text-accent2">Link!</a></p>
        </div>
      </div>
    </div>


  </div>
  <!-- Row Container with Cards END-->

</div>
<!-- Main Container END-->

<!-- JS Imports -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="./js/magic.js"></script>

【问题讨论】：

你在找这个吗？ jsfiddle.net/wdvq57rp/1
这很接近了！在与第二块瓷砖的第二行中，仍然存在间隙。我希望所有垂直和水平卡片之间的边距/间隙相同。
你必须使所有 col 高度相同或使用 CSS Masonry 布局技巧w3bits.com/demo/css-masonry
签出这个例子jsfiddle.net/wdvq57rp/3

标签： html css responsive-design materialize

【解决方案1】：

基本上在 12 格系统中，您不能使用 l3 6 次，这意味着 3*6=18，因此您可以在容器内多使用一行来使用其余的网格。看看这个小提琴。

https://jsfiddle.net/wdvq57rp/2/

【讨论】：

【解决方案2】：

终于发现我想要实现的目标可以通过 column-width 和 column-gap 实现：https://jsfiddle.net/wdvq57rp/4/

div.card-container {
  -moz-column-width: 23rem;
  -webkit-column-width: 23rem;
  -moz-column-gap: 1rem;
  -webkit-column-gap: 1rem;
}

.card-panel {
  display: inline-block;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Stacked-Cards Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">

  <!-- CSS Imports -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
  <link rel="stylesheet" href="./css/style.css">

  <!-- Fonts Imports -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>

  <h1>Stacked-Cards Test</h1>

  <!-- Card Container -->
  <div class="row card-container">


    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

  </div>
  <!-- Card Container END -->

  <!-- JS Imports -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</body>

</html>

【讨论】：