Google material design lite : 网格分布

Question

使用 google material 精简版，我想要 1 个较大的 div 和 4 个较小的 div，格式如下：

我最初的想法是将所有内容都放在一个 mdl-grid 中。然后创建两个 mdl-grids，并在第二列中创建两行和两列以创建 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-grid 中错过了 mdl-cell--12-col :

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

Google material design lite : 网格分布

Google material design lite : grid distribution

html

css

material-design

material-design-lite