Fußzeile Sortierelemente dynamisch

Question

Ich versuche, meine 3 Fußzeilenelemente in einer einzigen Zeile zu setzen.

Das erste Element sollte 50% des Platzes einnehmen und der Rest des 2 Elements sollte jeweils 25% einnehmen.

Ich habe mein Bestes versucht, diese 3 Elemente in der richtigen Reihenfolge zu sortieren. Aber ich habe keine Ahnung, warum meine drei Elemente nicht in einer einzigen Reihe sind und wo die Breite dieser drei Elemente wird (50%, 25%, 25%)

ich jsfiddle hier geschaffen haben, wo Sie sehen können, dass die 3 Elemente nicht richtig sortiert sind.

Kann jemand eine Idee haben, wie man dieses Problem beheben kann !!!

CODE ---

<footer class="mdl-mega-footer" style="background: #ffffff"> 
    <div class="mdl-mega-footer--middle-section"> 
     <div class="mdl-grid"> 
     <div class="mdl-mega-footer--drop-down-section"> 
      <img src="public/images/office.jpg" alt="office" height="42" width="82"> 
      <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked> 
      <ul class="mdl-mega-footer--link-list"> 
      <p> This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. This is just some test datas. </p> 
      </ul> 
     </div> 
     </div> 


     <div class="mdl-mega-footer--drop-down-section"> 
     <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked> 
     <h1 class="mdl-mega-footer--heading">Bestsellers</h1> 
     <ul class="mdl-mega-footer--link-list"> 
      <li><a href="#">• A4</a></li> 
      <li><a href="#">• A5</a></li> 
      <li><a href="#">• Pens</a></li> 
      <li><a href="#">• Staplers</a></li> 
     </ul> 
     </div> 
     <div class="mdl-mega-footer--drop-down-section"> 
     <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked> 
     <h1 class="mdl-mega-footer--heading">We're social! </h1> 
     <ul class="mdl-mega-footer--link-list"> 
      <li><a href="#">Facebook</a></li> 
      <li><a href="#">Twitter</a></li> 
      <li><a href="#">LinkedIn</a></li> 
     </ul> 
     </div> 
    </div> 
</footer> 

Answer 1

Sie haben die mdl-grid div korrekt gestartet, aber Sie müssen jedes Element, das Sie auf der Zeile in einer mdl-Zelle div wollen setzen. Da 50%, 25% und 25% gewünscht werden und die Anzahl der verfügbaren Spalten 12 beträgt, sollten Ihre divs 6 Spalten, 3 Spalten und 3 Spalten umfassen.

<div class="mdl-cell mdl-cell--6-col">Big Column</div> 
<div class="mdl-cell mdl-cell--3-col">Middle Column</div> 
<div class="mdl-cell mdl-cell--3-col">Right Column</div> 

Hier ist eine Gabel Ihrer jfiddle

EDIT: Es ist wie einige Ihrer mega Fußzeile Klassennamen sucht sollte statt Doppel Striche doppelten Unterstrichen haben.

mdl-mega-footer__middle-section 

Und es scheint auch das Beispiel mega-footer aufgelistet here den gleichen Fehler hat, so kann ich sehen, warum Sie verwirrt waren! Es nervt immer wenn das Unterrichtsmaterial falsch ist!