フッターのソート要素を動的に

Question

私は3つのフッター要素を1つの行に配置しようとしています。

最初の要素はスペースの50％を占め、2つの要素の残りの部分はそれぞれ25％を占める必要があります。

私はこれらの3つの要素を正しい順序で並べ替えることを最善に試みました。 しかし、私は私の3つの要素は、単一の行に含まれていない理由を任意のアイデアを持っていない、どこでそれらの3つの要素の幅が（50％、25％、25％）となります

私はここjsfiddle を作成しています、 3つの要素が正しい方法でソートされていないことがわかります。

誰でもこの問題を解決する方法を知ることができますか？

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

あなたは正しくMDL-グリッドのdivを始めましたが、あなたは、MDL-セルのdiv内の行にしたい各項目を配置する必要があります。具体的には、50％、25％、25％を選択し、使用可能な列数を12にすると、divは6列、3列、3列になります。

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

はここにあなたのjfiddle

EDITのフォークです：それは代わりにダブルダッシュの二重のアンダースコアを持っている必要があり、あなたのメガフッターのクラス名の一部のように見えます。

mdl-mega-footer__middle-section 

そしてまた、例えばメガフッターはあなたが混乱した理由私が見ることができるようにhereは同じ過ちを持って記載されている表示されます！教材が間違っていると、いつも吸うよ！