我在语义UI中找到了“相等高度”类,但是我不能使内部div具有相同的高度(例如“ui segment”)。 这里有更多细节。
http://jsfiddle.net/ozk615p6/34/
检查我的以下截图
<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 :(得分:0)
根据此post,一种可能的解决方案是使用列的this to match the height。
虽然在下面的代码中仅使用Semantic UI类编写html:
<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的高度相同。
答案 1 :(得分:0)
一种方法是每this documentation使用ui cards
。在附带的JSFiddle中,该版本尚不支持自动使用flex的等高卡。如果您升级到最新版本,则将为此提供支持。
在此处查看示例:https://jsfiddle.net/5kL2pf7q/1/