Question

我想要做几次的事情就是在谷歌Materialize提供的卡片上妥善平铺。目前，我看起来像这样：

我希望卡片之间不必要的空间被移除，而卡片保留了不同的大小，如我编辑的截图所示：

目前，这是整页html和css：

＆＃13;

body {
  background-image: url("https://images.unsplash.com/photo-1476362555312-ab9e108a0b7e?auto=format&fit=crop&w=1350&q=80");
  background-repeat: no-repeat;
  background-size: cover;
}

h2 {
  text-align: center;
  color: white;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 50%;
  margin-top: 20px;
}

hr {
  border-color: white;
}

p {
  margin-top: 140px;
  color: white;
}

nav.nav-center ul {
  text-align: center;
}

nav.nav-center ul li {
  display: inline;
  float: none;
}

nav.nav-center ul li a {
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <title>My website</title>
</head>

<body>
  <nav class="nav-center grey" role="navigation">
    <div class="nav-wrapper container">
      <ul>
        <li><a href="sass.html">About me</a></li>
        <li><a href="badges.html">My projects</a></li>
        <li><a href="collapsible.html">Work experience</a></li>
        <li><a href="collapsible.html">Contact details</a></li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1498576260462-eefc9d0ce9f7?auto=format&fit=crop&w=1350&q=80">
            <span class="card-title">Skiing</span>
          </div>
          <div class="card-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor lacus, ultricies tincidunt dolor ac, commodo iaculis nunc. Mauris quam.
            </p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1452065656801-6c60b6e7cbc5?auto=format&fit=crop&w=1267&q=80">
            <span class="card-title">Sailing</span>
          </div>
          <div class="card-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor lacus, ultricies tincidunt dolor ac, commodo iaculis nunc. Mauris quam.
            </p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1499242015907-fd91d5d02f13?auto=format&fit=crop&w=1350&q=80">
            <span class="card-title">Diving</span>
          </div>
          <div class="card-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor lacus, ultricies tincidunt dolor ac, commodo iaculis nunc. Mauris quam.
            </p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1498576260462-eefc9d0ce9f7?auto=format&fit=crop&w=1350&q=80">
            <span class="card-title">Skiing</span>
          </div>
          <div class="card-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor lacus, ultricies tincidunt dolor ac, commodo iaculis nunc. Mauris quam.
            </p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1452065656801-6c60b6e7cbc5?auto=format&fit=crop&w=1267&q=80">
            <span class="card-title">Sailing</span>
          </div>
          <div class="card-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor lacus, ultricies tincidunt dolor ac, commodo iaculis nunc. Mauris quam.
            </p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="https://images.unsplash.com/photo-1499242015907-fd91d5d02f13?auto=format&fit=crop&w=1350&q=80">
            <span class="card-title">Diving</span>
          </div>
          <div class="card-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor lacus, ultricies tincidunt dolor ac, commodo iaculis nunc. Mauris quam.
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <footer class="page-footer grey" style="position:fixed;bottom:0;left:0;width:100%;">
    <div class="container">
      Background photo
      <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;"
        href="https://unsplash.com/@jack_scorner?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Thomas Griesbeck"><span style="display:inline-block;padding:2px 3px;"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span>
        <span
          style="display:inline-block;padding:2px 3px;">Thomas Griesbeck</span>
      </a>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2018 Jonathan Woollett-Light
        <a class="white-text text-lighten-4 right">MIT License</a>
      </div>
    </div>
  </footer>
</body>

</html>

＆＃13;

如果您认为我错过了任何内容，请发表评论，以便我可以修改我的问题。

Answer 1

刚刚制作了三列：

.append

Materialise中的平铺卡片

1 个答案: