材料設計Lite卡沒有正確對齊

我正在嘗試製作MDL網站。我遇到了一些問題......在添加了一些卡之後，它們不會沿水平方向一個接一個地排列，而是一個接一個地垂直排列，在屏幕的右側留下一個很大的空白區域內容。在這裏給你更多的信息的代碼：材料設計Lite卡沒有正確對齊

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

}

預先感謝您的幫助！

來源

2015-12-08 SimoPiersi

您還需要發佈CSS。 – j08691

確實......演示它或它沒有發生！ :) –

而不是將mdl卡和mdl-cell放在同一個div中，將卡包裝在單元格中，使一個單元格水平對齊。

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

來源

2016-01-05 23:55:22

我最近用這種方式解決了我的問題，反正謝謝！ – SimoPiersi

材料設計Lite卡沒有正確對齊

回答

相關問題