如何在Semantic UI中移除列高度使卡片向上排列？

你的问题根源很明确——给flex容器设置的max-height: 200vh限制了容器高度，导致卡片没办法根据内容自动向上紧凑对齐。咱们直接移除这个高度限制就能搞定。

具体修改步骤 #

1. 找到这段CSS代码：

display: flex; flex-direction: column; /* flex-wrap: wrap; */ align-content: flex-start; max-height: 200vh;

2. 删除其中的max-height: 200vh，修改后的样式为：

display: flex; flex-direction: column; /* flex-wrap: wrap; */ align-content: flex-start;

修改后的完整代码示例 #

<style>
  /* 移除高度限制后的flex容器样式 */
  .your-flex-container {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    align-content: flex-start;
  }
</style>

<div class="ten wide column">
  <div class="ui stackable three column grid">
    <%if(post === 0){%>
    <%}else{%>
      <%post.forEach(function(post){%>
        <div class="column">
          <div class="ui card">
            <div class="small image">
              <img src="<%=post.image%>">
            </div>
            <div class="content">
              <div class="ui tiny header"><%=post.title%></div>
              <div class="description">
              </div>
            </div>
            <div class="extra content">
              <span class="left floated like">
                <a href="/like/<%=post._id%>" class="activating element" data-title="Total Number of Likes" data-content="<%=post.like%>"><%=post.like%> Like</a>
              </span>
              <span>
                <a href="/view/<%=post._id%>" class="activating element" data-title="Total Number of Comment" data-content="<%=post.cCount%>" style="margin-left: 10px !important;"><%=post.cCount%> Comment</a>
              </span>
              <span class="right floated eye">
                <a href="/view/<%=post._id%>" class="activating element" data-title="Total Number of View" data-content="<%=post.visit%>"><%=post.visit%> view</a>
              </span>
            </div>
          </div>
        </div>
      <%})%>
    <%}%>
  </div>
</div>

补充说明 #

Semantic UI的stackable three column grid本身就自带响应式卡片排列能力，移除固定高度后，网格会根据卡片数量和高度自动调整布局，让卡片在列内紧凑排列，不会出现多余留白。如果后续需要调整卡片间距，可以用Semantic UI自带的spaced类（比如ui three column grid spaced）来控制，完全不需要手动设置flex高度。

内容的提问来源于stack exchange，提问作者Jomar Tinga