Question

<input type="file" name="files" id=1>
<input type="file" name="files" id=2>

<div class="mdc-card problem">
        <section class="mdc-card__primary">
            <h1 class="mdc-card__title mdc-card__title--large">title here</h1>
            <h2 class="mdc-card__subtitle">subtitle here</h2>
        </section>
        <section class="mdc-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam nostrum nisi optio iusto excepturi sequi itaque. Vitae laudantium fugiat, id eius voluptates placeat labore magnam est saepe sapiente et molestias quaerat numquam excepturi illum dolores quam error, eaque rerum ea vero ipsum sequi. Sapiente adipisci reiciendis quod officia aliquam quidem praesentium cupiditate facere, magni nemo, asperiores, reprehenderit eveniet corporis eligendi et. Numquam voluptatem, consectetur. A harum quas, veritatis blanditiis, officia impedit voluptas laborum itaque delectus dolore explicabo aut, culpa iste sapiente repellat voluptate voluptates commodi dignissimos similique repudiandae. Nulla expedita atque dolore alias, facilis ipsam qui doloribus, iure quo animi.
        </section>
        <section class="mdc-card__actions">
            <button class="mdc-button mdc-button--compact mdc-card__action">action 1</button>
            <button class="mdc-button mdc-button--compact mdc-card__action">action 2</button>
        </section>
    </div>

demo - 演示第一行是全宽没有问题，第二行有大支持文本的问题，第三行有小支持文本

mdc-card - docs

如何处理卡片的宽度和高度。

处理此类问题的最佳方法

Answer 1

仅添加width demo

或

如果所有卡片的高度相同 - 将height，overflow: hidden;添加到mdc-card__supporting-text课程demo

截至目前已经结束了

材料设计组件 - 在卡片中添加宽度，高度时出现问题

1 个答案: