Question

使用google material lite，我想要一个2x2格式的1个较大的div和4个较小的div，如下所示：

我最初的想法是把所有东西放在一个mdl-grid中。然后创建两个mdl-grid，并在第二列中创建两行和两列以创建1x1和2x2效果。

然而，这似乎不可能，或者我只是没有正确地做到这一点？

<div class="mdl-grid">
    <div class="mdl-grid">
        <div>image</div>
    </div>
    <div class="mdl-grid">
        <div class="mdl-grid">
            <div>1</div>
            <div>2</div>
        </div>
        <div class="mdl-grid">
            <div>3</div>
            <div>4</div>
        </div>
    </div>

 </div>

编辑1：在第一次评论时添加单元格大小

<div class="mdl-grid">
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--6-col">image</div>
    </div>
    <div class="mdl-grid">
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col">1</div>
            <div class="mdl-cell mdl-cell--6-col">2</div>
        </div>
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col">3</div>
            <div class="mdl-cell mdl-cell--6-col">4</div>
        </div>
</div>

Answer 1

您好像缺少结束</div>标记。这似乎对我有用：

<div class="mdl-grid">
<div class="mdl-grid  mdl-cell">image

</div>
<div class="mdl-grid mdl-cell">
    <div class="mdl-grid  mdl-cell">
        <div class="mdl-cell mdl-cell--5-col">1 rehrewhwer</div>
        <div class="mdl-cell mdl-cell--5-col">2 er her wreh </div>
    </div>
    <div class="mdl-grid mdl-cell">
        <div class="mdl-cell mdl-cell--5-col">3 hrew rew</div>
        <div class="mdl-cell mdl-cell--5-col">4  eryh rwey erw</div>
    </div>
</div>

Answer 2

mdl-cell--12-col内您遗漏了mdl-grid：

<div class="mdl-grid">
   <div class="mdl-cell mdl-cell--6-col bg-sky">
     image
   </div>
   <div class="mdl-cell mdl-cell--6-col">
      <div class="mdl-grid mdl-grid--no-spacing">
          <div class="mdl-cell mdl-cell--12-col">
              <div class="mdl-grid">
                  <div class="mdl-cell mdl-cell--6-col bg-sky">1</div>
                  <div class="mdl-cell mdl-cell--6-col bg-sky">2</div>
              </div>
              <div class="mdl-grid">
                 <div class="mdl-cell mdl-cell--6-col bg-sky mdl-col--stretch">3</div>
                 <div class="mdl-cell mdl-cell--6-col bg-sky mdl-col--stretch">4</div>
             </div>
         </div>
      </div>
   </div>
</div>

每个mdl-grid应该有mdl-cell，如果是一行则放入mdl-cell--12-col。

请参阅我的codepen：Codepen Demo

Google Material Design lite：网格分发

2 个答案: