MDL mdl-layout-spacer Erzwingt den Inhalt zur nächsten Zeile

Dies ist eine ziemlich einfache Material Design Lite Frage, aber das hat mich verrückt gemacht. Im folgenden Beispiel aus der MDL examples website positioniert die div mit der Klasse mdl-layout-spacer die Elemente nach rechts von der enthaltenen div. Beachten Sie das Kalender-Symbol auf der rechten Seite ist:MDL mdl-layout-spacer Erzwingt den Inhalt zur nächsten Zeile

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

Nun zum Problem. Ich habe versucht, die mdl-layout-spacer Technik in ein paar verschiedenen Situationen auf meiner Website, aber es scheint nur für Symbole in der Site-Header funktionieren. Sehen Sie in diesem Bild, wie das Abzeichen Symbol auf der rechten Seite:

Ich möchte diese Technik in Karten verwenden zu können, aber es scheint nicht zu funktionieren. Ich habe eine JSFiddle example mit dem folgenden HTML erstellt. Unter Verwendung der mdl-layout-spacer würde ich erwarten, dass das Wort "today" rechts neben dem enthaltenden div steht, aber wie Sie sehen können, geht es in die nächste Zeile.

Fehle ich etwas? Sollte ich den Spacer wie vorgesehen nutzen können oder muss ich diesen Ehrgeiz verwerfen?

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

Quelle

2017-02-16 jeffery_the_wind

Nein, das ist nicht wahr. mdl-layout-spacer Klasse ist nicht spezifisch für Symbole. Überprüfen Sie diese codepen example Ich habe erstellt. Ich habe Text anstelle von Symbol verwendet und es funktioniert gut.

Im Karten Beispiel haben Sie verwendet Stile:

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

Dies ist der Code, der das Element nach rechts schieben. Zur Kasse JsFiddle Ich habe die gleiche CSS verwendet, um Ihr Beispiel zu beheben.

Bearbeitet: Ihr Beispiel funktioniert nicht, weil Ihr Element display: flex css nicht hat. Fügen Sie also einfach dieses CSS zur übergeordneten Klasse hinzu:

.mdl-card__supporting_text { 
    display: flex; 
}

Quelle

2017-02-21 08:58:56

MDL mdl-layout-spacer Erzwingt den Inhalt zur nächsten Zeile

Antwort

Verwandte Themen