Semantic-UI: Как ограничить блок содержимого карты, чтобы не нажимать дополнительный контент

Question

Я пытаюсь создать сетку с полной сеткой, используя сетку и карты семантического интерфейса.

Вот что я получил: http://codepen.io/emzero/pen/Vjrrab?editors=1100

Посмотрите, как extra content (желтый) получает толкнул вниз и из карты, когда размер экрана не является достаточно большим? Я бы хотел, чтобы extra content всегда отображался в нижней части карты и просто обрезал содержимое body, если он не подходит.

Благодаря

Answer 1

Добавьте этот код в файл представления:

<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

Это был вопрос о создании текста тела также display: flex.

Вот результирующая версия: http://codepen.io/emzero/pen/rLGAzy