2016-06-26 4 views
0

Ich fand "gleiche Höhe" Klassen in Semantic UI, aber ich kann nicht innere Divs die gleichen Höhen ("UI-Segment" zum Beispiel). Mehr Details hier.Semantic UI Spalten gleicher Größe

http://jsfiddle.net/ozk615p6/34/

Check out my unten Screenshots

enter image description here

<div class="ui container indent border shadow"> 
    <div class="two column stackable ui grid "> 
    <div class="equal height row"> 
     <div class="column"> 
     <h2 class="ui header center aligned ">Lorem</h2> 
     <div class="ui segment "> 
      <div class="ui list "> 
      <div class="item"> 
       <i class="checkmark icon"></i> 
       <div class="content"> 
       Lorem 
       </div> 
      </div> 
      <div class="item"> 
       <i class="xmark icon"></i> 
       <div class="content"> 
       Lorem 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="column"> 
     <h2 class="ui header center aligned ">Lorem</h2> 
     <div class="ui segment "> 
      <div class="ui list"> 
      <div class="item"> 
       <i class="checkmark icon"></i> 
       <div class="content"> 
       Lorem 
       </div> 
      </div> 
      <div class="item"> 
       <i class="checkmark icon"></i> 
       <div class="content">Lorem</div> 
      </div> 
      <div class="item"> 
       <i class="checkmark icon"></i> 
       <div class="content">Lorem</div> 
      </div> 
      <div class="item"> 
       <i class="xmark icon"></i> 
       <div class="content">Lorem</div> 
      </div> 
      <div class="item"> 
       <i class="xmark icon"></i> 
       <div class="content">Lorem</div> 
      </div> 
      <div class="item"> 
       <i class="xmark icon"></i> 
       <div class="content">Lorem</div> 
      </div> 
      <div class="item"> 
       <i class="xmark icon"></i> 
       <div class="content">Lorem</div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 

Antwort

0

Nach dieser post, eine mögliche Lösung ist this to match the height Ihrer Spalten zu verwenden.

Obwohl html nur mit den Semantic UI-Klassen im Code zu schreiben unter:

`<div class="ui container"> 
    <div class="ui three column doubling stackable grid container"> 
     <% camps.forEach(function (e) { %> 
     <div class="column"> 
      <h1 class="ui header"><%= e.name %> </h1> 
      <img src="<%= e.image %>" alt="" class="image small ui"> 
      <p> <%= e.description %></p> 
      <div class="extra"><div class="ui label"> 
      <a href="/campground/<%= e._id %>">Read More</a> 
      </div></div> 
     </div> 
     <% }) %> 
     </div> 
    </div> 

ich, dass die Spalten mit der gleichen Höhe sind bereits realisiert, wie Sie here sehen können.