使用框架Materialize.css构建一个网站，无法弄清楚如何正确定位卡片。
我希望这些卡片位于视差部分正下方（它在视觉上称视差为标题，下面有一个短段）内联（因此它们不是逐块分开的）。
index.html中的代码段
<section style="display:inline;">
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<div class="card__date">
<span class="card__date__day">12</span>
<span class="card__date__month">May</span>
</div>
<div class="card__body">
<div class="card__category"><a href="#">Photos</a></div>
<h2 class="card__title"><a href="#">Bender Should Not Be Allowed on TV</a></h2>
<div class="card__subtitle">A Head in the Polls</div>
<p class="card__description">
With a warning label this big, you know they gotta be fun! This is the worst part. The calm before the battle. No! The cat shelter's on to me. Yes, I saw. You were doing well, until everyone died. Daylight and everything.
</p>
</div>
<footer class="card__footer">
<span class="icon icon--time"></span>6 min
<span class="icon icon--comment"></span><a href="#">39 comments</a>
</footer>
</article>
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<div class="card__date">
<span class="card__date__day">12</span>
<span class="card__date__month">May</span>
</div>
<div class="card__body">
<div class="card__category"><a href="#">Photos</a></div>
<h2 class="card__title"><a href="#">Bender Should Not Be Allowed on TV</a></h2>
<div class="card__subtitle">A Head in the Polls</div>
<p class="card__description">
With a warning label this big, you know they gotta be fun! This is the worst part. The calm before the battle. No! The cat shelter's on to me. Yes, I saw. You were doing well, until everyone died. Daylight and everything.
</p>
</div>
<footer class="card__footer">
<span class="icon icon--time"></span>6 min
<span class="icon icon--comment"></span><a href="#">39 comments</a>
</footer>
</article>
</section>
资产/ css / style.css中的代码
* {
box-sizing: border-box; }
body {
font-family: Roboto;
font-size: 16px;
line-height: 1.4;
background-color: #d8e0e5; }
.card {
position: static;
overflow: hidden;
top: 50%;
left: 50%;
width: 370px;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s; }
.card a {
color: inherit;
text-decoration: none; }
.card:hover {
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3); }
.card__date {
position: absolute;
top: 20px;
right: 20px;
width: 45px;
height: 45px;
padding-top: 10px;
color: #FFF;
text-align: center;
line-height: 13px;
font-weight: bold;
background-color: #38c4a5;
border-radius: 50%; }
.card__date__day {
display: block;
font-size: 14px; }
.card__date__month {
display: block;
font-size: 10px;
text-transform: uppercase; }
.card__thumb {
height: 235px;
overflow: hidden;
background-color: #000;
transition: height 0.3s; }
.card__thumb img {
display: block;
opacity: 1;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.card:hover .card__thumb img {
opacity: 0.6;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); }
.card:hover .card__thumb {
height: 90px; }
.card__body {
position: relative;
padding: 20px;
height: 185px;
transition: height 0.3s; }
.card:hover .card__body {
height: 330px; }
.card__category {
position: absolute;
left: 0;
top: -25px;
height: 25px;
padding: 0 15px;
color: #FFF;
font-size: 11px;
line-height: 25px;
text-transform: uppercase;
background-color: #38c4a5; }
.card__title {
margin: 0;
padding: 0 0 10px 0;
font-size: 22px;
color: #000;
font-weight: bold; }
.card:hover .card__title {
-webkit-animation: titleBlur 0.3s;
animation: titleBlur 0.3s; }
.card__subtitle {
margin: 0;
padding: 0 0 10px 0;
font-size: 19px;
color: #38c4a5; }
.card:hover .card__subtitle {
-webkit-animation: subtitleBlur 0.3s;
animation: subtitleBlur 0.3s; }
.card__description {
position: absolute;
left: 20px;
right: 20px;
bottom: 65px;
margin: 0;
padding: 0;
color: #666C74;
font-size: 14px;
line-height: 27px;
opacity: 0;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition-delay: 0s;
-webkit-transform: translateY(25px);
-ms-transform: translateY(25px);
transform: translateY(25px); }
.card:hover .card__description {
opacity: 1;
transition-delay: 0.1s;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.card__footer {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
font-size: 11px;
color: #A3A9AB; }
.card__footer .icon--comment {
margin-left: 12px; }
.icon {
display: inline-block;
vertical-align: middle;
margin-right: 2px; }
.icon--comment {
background: url(https://www.grafikart.fr/demo/CSS3/cardui/img/icon-comment.png);
width: 14px;
height: 14px;
margin-top: -2px; }
.icon--time {
background: url(https://www.grafikart.fr/demo/CSS3/cardui/img/icon-time.png);
width: 10px;
height: 17px;
margin-top: -3px; }
@-webkit-keyframes titleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6); }
100% {
opacity: 1;
text-shadow: 0px 5px 5px transparent; } }
@keyframes titleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6); }
100% {
opacity: 1;
text-shadow: 0px 5px 5px transparent; } }
@-webkit-keyframes subtitleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(56, 196, 165, 0.6); }
100% {
opacity: 1;
text-shadow: 0px 5px 5px rgba(56, 196, 165, 0); } }
@keyframes subtitleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(56, 196, 165, 0.6); }
100% {
opacity: 1;
text-shadow: 0px 5px 5px rgba(56, 196, 165, 0); } }
尝试用一个标签包装卡片给他一种display: inline样式，但没有改变它。
这是我希望它如何工作的模式：
