语义UI等于高度列

时间:2016-06-26 12:22:01

标签: html5 css3 semantic-ui

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

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>

2 个答案:

答案 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/