Материал Дизайн 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-карту и mdl-ячейку в одном и том же div, оберните карты в ячейки, создавая одну ячейку, выровненную друг другу по горизонтали.

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