次の行に内容を強制するMDL mdl-layout-spacer

これはかなり基本的なMaterial Design Liteの質問ですが、これは私を夢中にしています。 MDL examples websiteの次の例では、mdl-layout-spacerのdivは、その要素を含む最後の要素の後に、divの位置にうまく配置します。問題の今次の行に内容を強制するMDL mdl-layout-spacer

<!-- Event card --> 
<style> 
    .demo-card-event.mdl-card { 
     width: 256px; 
     height: 256px; 
     background: #3E4EB8; 
    } 

    .demo-card-event>.mdl-card__actions { 
     border-color: rgba(255, 255, 255, 0.2); 
    } 

    .demo-card-event>.mdl-card__title { 
     align-items: flex-start; 
    } 

    .demo-card-event>.mdl-card__title>h4 { 
     margin-top: 0; 
    } 

    .demo-card-event>.mdl-card__actions { 
     display: flex; 
     box-sizing: border-box; 
     align-items: center; 
    } 

    .demo-card-event>.mdl-card__actions>.material-icons { 
     padding-right: 10px; 
    } 

    .demo-card-event>.mdl-card__title, 
    .demo-card-event>.mdl-card__actions, 
    .demo-card-event>.mdl-card__actions>.mdl-button { 
     color: #fff; 
    } 
</style> 
<div class="demo-card-event mdl-card mdl-shadow--2dp"> 
    <div class="mdl-card__title mdl-card--expand"> 
     <h4> Featured event:<br> May 24, 2016<br> 7-11pm </h4> 
    </div> 
    <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
     Add to Calendar 
    </a> 
     <div class="mdl-layout-spacer"></div> <i class="material-icons">event</i> </div> 
</div>

：カレンダーアイコンを右であることに注意してください。私はサイトのいくつかの異なる状況でmdl-layout-spacerテクニックを試しましたが、サイトヘッダーのアイコンのために働いているようです。バッジアイコンが右側にあるどのようにこの写真でご覧ください：

私はカードにこのテクニックを使用することができるようにしたい、それが動作するようには思えません。私は次のHTMLを使ってJSFiddle exampleを作成しました。 mdl-layout-spacerを使用すると、「today」という単語が包含divの右側に配置されることが期待されますが、わかるように、次の行に移動します。

何か不足していますか？意図したようなスペーサーを使用できるか、この野望を捨てる必要がありますか？

<body> 
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> 
     <main class="mdl-layout__content"> 
      <div class="mdl-grid"> 
       <div class="full-width-card hover-card mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-card mdl-shadow--2dp" style="min-height:100px;"> 
        <div class="mdl-card__supporting_text"> 
         <a class="no-decoration" href="#"> <span style="display:inline-block;"> 
        username 
        </span> <span style="display:inline-block;"> 
        <i class="material-icons">acct_icon</i> 
        </span> </a> 
         <!-- spacer --> 
         <div class="mdl-layout-spacer"></div> 
         <!-- --><span style="display:inline-block;">today</span> </div> 
       </div> 
      </div> 
     </main> 
    </div> 
</body>

出典

2017-02-16 jeffery_the_wind

いいえ、それは真実ではありません。 mdl-layout-spacerクラスはアイコンに固有のものではありません。これを確認してくださいcodepen example私は作成しました。私はアイコンの代わりにテキストを使用して、それは正常に動作しています。

カードの例では

、あなたが使用しているスタイルは：

.demo-card-event>.mdl-card__actions { 
    display: flex; 
    box-sizing: border-box; 
    align-items: center; 
}

これは右に要素を推進しているコードです。これをチェックアウトするJsFiddleあなたの例を修正するのに同じCSSを使用しました。

編集：あなたの要素にはdisplay: flex cssが含まれていないため、あなたの例は機能していません。親クラスにこのCSSを追加してください：

.mdl-card__supporting_text { 
    display: flex; 
}

出典

2017-02-21 08:58:56

次の行に内容を強制するMDL mdl-layout-spacer

答えて

関連する問題