时间戳

首页 > 解决方案 > 如何对齐卡片页眉和页脚，使它们出现在可用垂直空间的顶部和底部？

angular - 如何对齐卡片页眉和页脚，使它们出现在可用垂直空间的顶部和底部？

问题描述

我正在尝试将卡片设置为“sidenav”内的显示包装，如下所示：

<div class="content-container" width="100%" height="100%" >

  <nav class="sidenav clr-flex-fill clr-flex-column clr-align-content-between" height="100%" >

    <div class="card clr-flex-fill clr-flex-column clr-align-content-between" height="100%">
      <div class="card-header clr-align-self-start">
        Selections
      </div>
      <div class="card-block clr-align-self-auto">
        <app-task-side-nav>
        </app-task-side-nav>
      </div>
      <div iclass="card-footer clr-align-self-end">
        <button class="btn btn-sm btn-link">Footer Action 1</button>
        <button class="btn btn-sm btn-link">Footer Action 2</button>
      </div>
    </div>
  </nav>

  <div class="content-area" height="100%" width="100%" >
    <router-outlet class="router-flex"></router-outlet>
  </div>

</div>

我希望“卡片页脚”位于可用空间的垂直顶部，“卡片页脚”显示在可用垂直空间的底部，“卡片块”占据可用垂直空间介于两者之间。

在此处输入图像描述

如上所示，我尝试了各种与 'clr-flex' 相关的样式，但这不起作用。有什么建议么？

这相当于...

<div class="main-container">
    <header class="header header-6">
        ...
    </header>
    <div class="content-container">
        <nav class="sidenav">
<div class="card">
            <div class="card-header">
                Header
            </div>
            <div class="card-block">
                <div class="card-title">
                    Block
                </div>
                <div class="card-text">
                    ...
                </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-sm btn-link">Footer Action 1</button>
                <button class="btn btn-sm btn-link">Footer Action 2</button>
            </div>
        </div>
        </nav>
        <div class="content-area">
            ...
        </div>
    </div>
</div>

标签： angularvmware-clarity

解决方案

找到了！

“卡片”样式的默认显示属性为“块”。如果你用'flex'覆盖它，那么我会得到我正在寻找的页眉和页脚对齐。

推荐阅读