我试图构建布局以实现具有响应式布局中的许多卡的CSS:大型显示器(col l3),两个中型(col m6)和一个in小(col s12)。实现CSS:响应式地堆叠卡
不幸的是我不能管理他们到无间隙垂直堆叠,即使它们的宽度是相同的:https://jsfiddle.net/wdvq57rp/
感谢您的帮助!
HTML:
<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>
CSS:
.card-panel {
margin: 10px;
padding: 10px;
}
.container {
margin: 0;
max-width: 100%;
width: 100%;
}
你在找这个吗? https://jsfiddle.net/wdvq57rp/1/ –
这就近了!在第二块瓷砖的第二排中,仍然存在缺口。我期望在所有垂直和水平卡片之间具有相同的利润/差距。 – Juri
比你必须使所有col同样高度或使用CSS砌体布局技巧http://w3bits.com/demo/css-masonry/ –