1. 首頁
  2. 問答
  3. 實現CSS：響應式地堆疊卡

實現CSS：響應式地堆疊卡

2017-07-03 89 views
0

我試圖構建佈局以實現具有響應式佈局中的許多卡的CSS：大型顯示器（col l3），兩個中型（col m6）和一個in小（col s12）。實現CSS：響應式地堆疊卡

不幸的是我不能管理他們到無間隙垂直堆疊，即使它們的寬度是相同的：https://jsfiddle.net/wdvq57rp/

感謝您的幫助！

Large Layout Gaps -> Image

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

來源

2017-07-03 Juri

+0

你在找這個嗎？ https://jsfiddle.net/wdvq57rp/1/ –

+0

這就近了！在第二塊瓷磚的第二排中，仍然存在缺口。我期望在所有垂直和水平卡片之間具有相同的利潤/差距。 – Juri

+0

比你必須使所有col同樣高度或使用CSS砌體佈局技巧http://w3bits.com/demo/css-masonry/ –

回答

0

終於找到了我想要的東西來實現是可能的列寬&柱間隙：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>

來源

2017-07-03 13:52:01 Juri

0

基本上在12網​​格系統不能使用l36倍，這意味着3×6 = 18，所以你可以在容器內再使用一行來使用網格的其餘部分。看到這個小提琴。

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

來源

2017-07-03 13:04:04

相關問題

 相關問題