我怎样才能给这些卡片元素相同的大小？

Posted 2023-03-05

【中文标题】我怎样才能给这些卡片元素相同的大小？

【英文标题】：How can i give these card elements the same size?

【发布时间】：2020-02-29 12:44:26

【问题描述】：

使用 Css 或 bootstrap 之类的，我怎样才能让示例中的卡片具有相同的高度和重量？？

我曾尝试使用 .card-deck 类 (Bootstrap .card-deck)，但由于水平滚动可能包含大量卡片元素，因此无法正常工作。

<div class="container-fluid">
    <div class="scrollmenu" id="main-row">
        <div id="main-element" class="card text-center floc-card">
            <div class="card-body">
                <h5 class="card-title">Title</h5>
                <h6 class="card-subtitle mb-2 text-muted">Description</h6>
                <p class="card-text font-weight-bold">
                Some text
                </p>
                <button type="button" class="btn btn-outline-primary bg-white files-btn">
                Button
                </button>
            </div>
        </div>

        .....
    </div>
</div>

这里是Code Example

【问题讨论】：

这能回答你的问题吗？ Setting equal heights for div's with jQuery

谢谢，我没有仔细研究它，但我相信那里更高级的答案会非常有用。

【参考方案1】：

你可以给下面的父容器和内部 div 自定义 css

div.scrollmenu 
    overflow: auto;
    white-space: nowrap;
    border-top: 5px solid black;
    padding: 25px;
    width: 100%;
    display:flex;
    flex-wrap:nowrap;


div.scrollmenu .card 
    flex: 0 0 auto;