Question

我的代码如下面Angular Material 2中所给出的

    <md-grid-list cols="2" rowHeight="2:1">
      <md-grid-tile>1 
        <div>
          <md-grid-list cols="4" rowHeight="1:1">
            <md-grid-tile colspan="2">5</md-grid-tile>
            <md-grid-tile >6</md-grid-tile>
            <md-grid-tile>7</md-grid-tile>
            <md-grid-tile >8</md-grid-tile>
            <md-grid-tile >9</md-grid-tile>
          </md-grid-list>
        </div>
      </md-grid-tile>
      <md-grid-tile >2</md-grid-tile>
      <md-grid-tile>3</md-grid-tile>
      <md-grid-tile>4</md-grid-tile>
    </md-grid-list>

现在** div **标签和md-grid-list在其中不可见。

更新 - 解决方案

        <md-grid-list cols="2" rowHeight="2:1">
      <md-grid-tile class="shape">1 
        <div class="shape1">
          <md-grid-list cols="2" rowHeight="1:1">
            <md-grid-tile >5</md-grid-tile>
            <md-grid-tile >6</md-grid-tile>
            <md-grid-tile>7</md-grid-tile>
            <md-grid-tile >6</md-grid-tile>
          </md-grid-list>
        </div>
      </md-grid-tile>
      <md-grid-tile class="shape">2</md-grid-tile>
      <md-grid-tile class="shape">3</md-grid-tile>
      <md-grid-tile class="shape">4</md-grid-tile>
    </md-grid-list>

下面给出了CSS。

        .shape{       
            background:#ffd600;
        }
        .shape1{
            background:#651fff;   
            width: 50%;    
        }

Answer 1

那是因为你的div崩溃了。试试这样：

<md-grid-list cols="2" rowHeight="2:1">
      <md-grid-tile>
         <div style="height: 100%; width: 100%; background-color: red;">
          <md-grid-list cols="2" rowHeight="2:1">
            <md-grid-tile>6</md-grid-tile>
            <md-grid-tile>7</md-grid-tile>
            <md-grid-tile>8</md-grid-tile>
            <md-grid-tile>9</md-grid-tile>
          </md-grid-list>
         </div>
        </md-grid-tile>
      <md-grid-tile >2</md-grid-tile>
      <md-grid-tile>3</md-grid-tile>
      <md-grid-tile>4</md-grid-tile>
</md-grid-list>

工作plunkr here

Angular Material2中md-grid-tile内的md-grid-list不可见

1 个答案: