2016-06-26 46 views
0

我在語義UI中發現「等高」類,但我無法讓內部div的高度相同(例如「ui segment」)。 更多細節在這裏。語義UI等高度列

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

檢查我下面的截圖

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> 

回答

0

根據這一post,一個可能的解決方案是使用你的列this to match the height

雖然編寫HTML只有在下面的代碼語義UI類:

`<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> 

我意識到列設置了相同的高度,你可以看到here