Question

我在语义UI中找到了“相等高度”类，但是我不能使内部div具有相同的高度（例如“ui segment”）。这里有更多细节。

检查我的以下截图

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

Answer 1

根据此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的高度相同。

Answer 2

一种方法是每this documentation使用ui cards。在附带的JSFiddle中，该版本尚不支持自动使用flex的等高卡。如果您升级到最新版本，则将为此提供支持。

在此处查看示例：https://jsfiddle.net/5kL2pf7q/1/

语义UI等于高度列

2 个答案: