Material Design Lite 卡片未正确对齐

Question

我正在尝试制作一个 MDL 网站。我遇到了一些问题...添加一些卡片后，它们不会水平对齐一张，而是一张垂直对齐，在屏幕右侧留下一个大的白色 space将保持没有任何内容。为您提供更多信息，请使用代码：

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

            <header class="mdl-layout__header">

                <div class="mdl-layout__header-row">

                    <!-- Title -->

                    <span class="mdl-layout-title">C. Piersigilli &#38 Associati </span>

                    <!-- Add spacer, to align navigation to the right -->

                    <div class="mdl-layout-spacer"></div>

                </div>

            </header>

            <div class="mdl-layout__drawer">

                <span class="mdl-layout-title"> Navigation </span>

                <nav class="mdl-navigation">

                    <a class="mdl-navigation__link" href=""> WebMail </a>
                    <a class="mdl-navigation__link" href=""> Contacts </a>

                </nav>

            </div>

            <main class="mdl-layout__content">

                <div class="page-content">

                    <div class="mdl-grid">

                        <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--3-col mdl-cell--4-col-phone">

                            <figure class="mdl-card__media">

                                <img src="./images/mdlLogo.png" alt="" />

                            </figure>

                            <div class="mdl-card__title">

                                <h1 class="mdl-card__title-text">Learning Web Design</h1>

                            </div>

                            <div class="mdl-card__supporting-text">

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>

                            </div>

                            <div class="mdl-card__actions mdl-card--border">

                                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>

                                <div class="mdl-layout-spacer"></div>

                                <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
                                <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="mdl-layout-spacer"></div>

                <div class="mdl-grid">

                    <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-phone card-lesson mdl-card mdl-color--indigo mdl-shadow--2dp">

                        <div class="mdl-card__title">

                            <h2 class="mdl-card__title-text">"Hello, World!"</h2>

                        </div>

                        <div class="mdl-card__supporting-text">

                            The first thing we need to do is define where we want to keep our workspace. Our workspace is simply the folder on our computer where all of our projects are stored. Select                         or...

                        </div>

                        <div class="mdl-card__actions mdl-card--border">

                            <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Learn More</button>

                        </div>

                    </div>

                </div>

            </main>

        </div>

代码本身很简单，我不明白为什么总是对齐错误。

这里也是 CSS 的要求：

.mdl-card__media {

    margin: 0;

}

.mdl-card__media > img {

    max-width: 100%;

}

.mdl-card__actions {

    display: flex;
    box-sizing: border-box;
    align-items: center;

}

.mdl-card__actions > .mdl-button--icon {+

    margin-right: 3px;
    margin-left: 3px;

}

.mdl-layout-title {

    font-family: "Roboto Mono" ;

}

在此先感谢您的帮助！

Answer 1

不要将 mdl-card 和 mdl-cell 放在同一个 div 中，而是将卡片包裹在单元格中，使一个单元格彼此水平对齐。

<div class="mdl-cell mdl-cel--3-col"> <div class="mdl-card"></div> </div>

Material Design Lite 卡片未正确对齐

Material Design Lite Cards don't align properly

html

css

material-design-lite