Question

我试图将我的3个页脚元素放在一行中。

第一个元素应该占据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-grid div，但您需要将所需的每个项目放在mdl-cell 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

的分支编辑：看起来你的一些巨型页脚类名称应该有双下划线而不是双短划线。

mdl-mega-footer__middle-section

并且看起来列出的示例巨型页脚here也有同样的错误，所以我可以看出为什么你感到困惑！教材不正确时总是很糟糕！

页脚动态排序元素

1 个答案: