材料设计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卡没有正确对齐

回答

相关问题