Materialize中的平铺卡片
Materialize中的平铺卡片
提问于 2018-01-11 07:09:32
我几次想做的事情就是适当地平铺谷歌的Materialize中提供的卡片。目前，我所拥有的如下所示：
我更希望删除卡片之间不必要的空间，而卡片保留不同的大小，如我编辑的截图所示：
目前，这是完整的html和css页面：
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;
}<!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, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", 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&utm_campaign=photographer-credit&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>
如果你认为我错过了什么，请留下评论，这样我就可以修改我的问题了。
回答 1
Stack Overflow用户
发布于 2018-01-18 03:42:05
我只做了三个这样的专栏：
<!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="row">
<div class="col s12">
<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">
<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>
</div>
<div class="col s12 m6 l4">
<div class="row">
<div class="col s12">
<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">
<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>
<div class="col s12 m6 l4">
<div class="row">
<div class="col s12">
<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">
<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>
</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, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", 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&utm_campaign=photographer-credit&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>
<style>
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;
}
</style>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48197582
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号