Semantic-UI: Wie man den Karteninhaltsblock begrenzt, so dass kein zusätzlicher Inhalt hinzugefügt wird

Question

Ich versuche ein seitenrastergroßes Raster mit Semantic-UI-Grid und -Karten zu erstellen.

Hier ist, was ich habe: http://codepen.io/emzero/pen/Vjrrab?editors=1100

Sehen Sie, wie die extra content (gelb) wird nach unten gedrückt und aus der Karte, wenn die Bildschirmgröße ist nicht groß genug? Ich möchte die extra content immer auf der Unterseite der Karte sichtbar sein und nur den body Inhalt trimmen, wenn es nicht passt.

Dank

Answer 1

diesen Code in View-Datei hinzufügen: auch display: flex

<div class="ui padded grid"> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <div class="ui four stackable cards"> 
      <div class="ui card"> 
      <div class="content"> 
      <div class="header">Cute Dog</div> 
      <div class="meta">2 days ago</div> 
      <div class="description"> 
      <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p> 
     </div> 
    </div> 
    <div class="extra content"><i class="check icon"></i> 121 Votes</div> 
    </div> 
    <div class="ui card"> 
     <div class="content"> 
     <div class="header">Cute Dog</div> 
     <div class="meta">2 days ago</div> 
     <div class="description"> 
     <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p> 
     </div> 
     </div> 
    <div class="extra content"><i class="check icon"></i> 121 Votes</div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 

Answer 2

Es war eine Frage der den Text des Körpers zu machen.

Hier ist die resultierende Version: http://codepen.io/emzero/pen/rLGAzy