实现CSS：响应式地堆叠卡

问题描述：

我试图构建布局以实现具有响应式布局中的许多卡的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/ –

答

终于找到了我想要的东西来实现是可能的列宽&柱间隙：https://jsfiddle.net/wdvq57rp/4/

CSS：

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%; 
}

HTML：

!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>

答

基本上在12网格系统不能使用l36倍，这意味着3×6 = 18，所以你可以在容器内再使用一行来使用网格的其余部分。看到这个小提琴。

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

实现CSS：响应式地堆叠卡

相关推荐