Materialise CSS: Karten reaktionsfähig stapeln

Ich versuche ein Layout in CSS zu erstellen mit vielen Karten, die in ein responsives Layout fallen: Vier Karten in großen Anzeigen (col l3), zwei in Medium (col m6) und eins in klein (col s12).Materialise CSS: Karten reaktionsfähig stapeln

Leider kann ich es nicht schaffen für sie vertikal ohne Lücken zu stapeln, obwohl ihre Breite ist die gleiche: https://jsfiddle.net/wdvq57rp/

Dank für die Hilfe!

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

Quelle

2017-07-03 Juri

suchst du das? https://jsfiddle.net/wdvq57rp/1/ –

Dies ist in der Nähe! In der zweiten Reihe mit der zweiten Kachel ist noch eine Lücke. Ich möchte die gleichen Ränder/Lücken zwischen allen vertikalen und horizontalen Karten haben. – Juri

als müssen Sie alle col gleiche Höhe machen oder verwenden Sie CSS Mauerwerk Layout-Trick http://w3bits.com/demo/css-maurerei/ –

Schließlich fand heraus, was ich wollte, ist, zu erreichen, möglich mit Spaltenbreite & Säule Spalt: 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>

Quelle

2017-07-03 13:52:01 Juri

Grundsätzlich in 12 Rastersystem nicht l36 mal verwenden können, die 3 * 6 = 18 bedeutet, so dass man kann eine weitere Zeile innerhalb des Containers verwenden, um den Rest des Rasters zu verwenden. Sieh dir diese Geige an.

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

Quelle

2017-07-03 13:04:04

Materialise CSS: Karten reaktionsfähig stapeln

Antwort

Verwandte Themen