Material Design Lite卡未正確對齊

Question

我正在嘗試建立一個MDL網站。 我遇到了一些問題......添加一些卡后，它們不會水平對齊另一個卡，而是一個在另一個旁邊垂直對齊，在屏幕右側留下一個大的空白區域，這將保持不變內容。 為了給你更多信息，這里是代碼：

<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>