Question

我有一个非常简单的测试页

Dim f As New System.IO.DirectoryInfo("yourFolderLocation")
Dim files = f.GetFiles.ToList
Dim latest = (From file In files Select file Order By file.CreationTime Ascending).FirstOrDefault

（并且正文也设置为100％，以便填充整个视口）

在第三张牌中没有任何内容，这是相同的高度，看起来不错。当我开始向其添加内容时，它会扩展并从第二张卡中占用空间。

我正在尝试做的是强迫它们具有相同的高度，即使只有其中一个有内容。

有什么建议吗？（我假设它与flexbox相关，但我无法确定问题）

Answer 1

您可以在卡片上添加flex:1，告诉它根据可用的高度收缩和增长。添加了一个自定义类，使其与语义UI的代码分开。

OP的自定义Chrome浏览器：添加flex-basis: 0会在Chrome中保留原始图片的高度和宽度。

＆＃13;

.eq-card.ui.card {
  flex: 1; /* Shrink and grow according to available height */
  flex-basis: 0;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css" rel="stylesheet" />
<div class="ui two column stretched grid padded" style="height: 100%;">
  <div class="column">
    <div class="ui card fluid">
      <div class="content"></div>
    </div>
  </div>
  <div class="column">
    <div class="ui card fluid eq-card">
      <div class="content"></div>
    </div>
    <div class="ui card fluid eq-card">
      <div class="content">
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

将以下CSS添加到card元素的直接父级。

.card-container { 
display: flex; 
align-items: stretch; 
}

这将拉伸所有flex项目/子组件以填充容器。

强制网格/卡内容的高度相等

2 个答案: