如何使用 Foundation js 填充卡片上的空白区域答案

【问题标题】：How to fill the empty space on my cards using Foundation js如何使用 Foundation js 填充卡片上的空白区域
【发布时间】：2022-01-24 01:09:21
【问题描述】：

我有卡片列表，右侧有空白空间，我假设至少可以有一张卡片，如下图：http://prnt.sc/26ia542 我不知道发生了什么，

有什么建议吗？这是我的代码

<div class="catalogues">
            <ul>
                <asp:ListView ID="listLibrary" runat="server">
                    <ItemTemplate>
                        <li>
                            <div class="catalogs">
                                <div class="catalog__cards collapse">
                                    <div class="medium-10 shrink medium-order-1 catalog__img">
                                        <a href="LibraryView<%#Eval("EnumContentTypeDescription")%>.aspx?ContentID=<%#Eval("ContentID")%>&Mode=View&View=0&SiteMap=instructor">
                                            <img class="lazyautosizes lazyloaded catalog-cover" src="<%# Eval("CoverPath") %>" sizes="245px">
                                        </a>
                                    </div>
                                    <div class="columns medium-10 medium-order-3 catalog__name-instructor-institution">
                                        <div class="catalog__name">
                                            <a class="catalog__name--title" href="LibraryView<%#Eval("EnumContentTypeDescription")%>.aspx?ContentID=<%#Eval("ContentID")%>&Mode=View&View=0&SiteMap=instructor"><%# Eval("LessonName") %></a>
                                        </div>
                                        <div class="catalog__instructor">
                                            <div>
                                                <span><%# Eval("RoleName") %></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="columns shrink small-4 medium-12 medium-order-2 catalog__is-online">
                                        <div class="catalog__online"><%# Eval("UserDisplayName") %></div>
                                    </div>
                                    <div class="columns medium-12 medium-order-4 catalog__price">
                                        <div class="catalog__position" onclick="<%# Eval("TotalView") %> == 0 ? '' : OpenPopUp(<%# Eval("ContentID") %>)"><%# Eval("TotalView") %> reads</div>
                                        <div class="catalog__position"><%# Eval("LabelName").ToString()!=""?Eval("LabelName").ToString(): "&nbsp;"%></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ItemTemplate>
                    <EmptyDataTemplate>
                        No Item in Library
                    </EmptyDataTemplate>
                </asp:ListView>
            </ul>
        </div>

这是css

 .catalog > .catalog__card {
    max-width: 235px;
    min-width: 235px;
}
.catalog__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border: none;
    border-radius: 3px;
    background: #fefefe;
    -webkit-box-shadow: 4px 4px 4px #e6e6e6;
    box-shadow: 4px 4px 4px #e6e6e6;
    overflow: hidden;
    color: #0a0a0a;
    min-height: 17rem;
}

任何建议，都会有所帮助

【问题讨论】：

标签： html foundation

【解决方案1】：

由于您已经在使用 flexbox 布局，您可以尝试 justify-content: space-between 或 justify-content: space-around 将盒子均匀地布置。

如果您不知道 flexbox 布局的工作原理，请查看本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：