如何在 Ionic 中进行 3 个网格设计，其中左侧的 1 个网格是 2 个网格的两倍（右侧一个在另一个上方）示例中答案

【问题标题】：How to make a 3 grids design in Ionic where 1 grid on the left is double the size of 2 grids (one above the other in the right) sample in post如何在 Ionic 中进行 3 个网格设计，其中左侧的 1 个网格是 2 个网格的两倍（右侧一个在另一个上方）示例中
【发布时间】：2015-09-03 03:02:54
【问题描述】：

我想做这样的东西：

你可以看到左边的一个大网格是右边两个网格的两倍（一个在另一个之上）：

这是我的 html 方法：

   <div class="content">
      <h1>SEGUROS</h1>
    </div>

    <section>

      <section class="taller-row">
        <div class="row">

          <div class="col standard-grid tall-grid">
            <img src="../img/ionic.png" class="img"/>

            <p>INFORMACIÓN<br> OTROS SEGUROS</p>

          </div>

        </div>
      </section>

      <section class="two-rows-in-one-column">
        <div class="row">
          <div class="col standard-grid right-cells">
            <img src="../img/ionic.png" class="img"/>

            <p>Dudas seguros de vida</p>
          </div>
        </div>

        <div class="row">

          <div class="col standard-grid">
            <img src="../img/ionic.png" class="img"/>

            <p>Dudas seguros exequias</p>
          </div>

        </div>
      </section>


    </section>

我的 css/sass 看起来像这样：

#dashboard .col.standard-grid{
  width: 100%;
  height: 0;
  padding-bottom: 38%;

}

#dashboard .col.standard-grid p{
  margin-top: $std-grid-height - 73px;
  font-size: 12px;
  margin-left: 25%;
}

#dashboard .col.standard-grid img{
  height: 25px;
  margin-left: 5%;
  margin-top: $std-grid-height/3;
  float: left;
}

#dashboard .col.standard-grid.different-grid {
  background-color: $golden-color;
  color: white;
}
#dashboard .col.tall-grid {
  height: $tall-grid-height;
}

#dashboard .col.tall-grid p{
  margin-top: $tall-grid-height/2.5;
  margin-left: 1%;
  text-align: center;
}

#dashboard .col.tall-grid img{
  margin-top: $tall-grid-height/4;
  margin-left: 43%;
}

#dashboard .taller-row{
  float: left;
  width: 50%;
  height: 0;
  padding-bottom: 5%;
  margin: -20px -5px 0px 5px;
}

#dashboard .two-rows-in-one-column{
  width: 50%;
  float: right;
  margin: -20px 5px 0px -5px;

}

【问题讨论】：

标签： css sass ionic-framework ionic ionic-view

【解决方案1】：

这是密码笔 - http://codepen.io/realin/pen/pjvzZw?editors=110

<div class="row custom_grid">
    <div class="col positive-bg"></div>
    <div class="col no_padding_margin">
        <div class="row no_padding_margin">
            <div class="col energized-bg no_padding_margin"></div>
        </div>
        <div class="row no_padding_margin">
            <div class="col calm-bg no_padding_margin"></div>
        </div>
    </div>
</div>
</div>

我使用了 ionic 的内置网格系统。单击 codepen 链接（上面共享）以检查 CSS 和工作示例。

【讨论】：

如果 CodePen 明天消失，你还会觉得这回答了问题吗？
是的，因为 HTML 是您所需要的。由于 col、energised-bg、row 等类是 ionic 内置的。 Codepen 只是展示了它是如何工作的。 :)

【解决方案2】：

也许这会有所帮助

<div class="row">
     <div class="col"></div>
     <div class="col" style="height: 100%;">
        <div class="row" style="height: 50%;"></div>
        <div class="row" style="height: 50%;"></div>
    </div>
</div>

我添加了内联 CSS，但您可以毫无问题地添加类。

【讨论】：

【解决方案3】：

我刚刚使用了viewport 单位，它解决了问题：

#dashboard .col.standard-grid{
  width: 100%;
  height: 20vh;

}

【讨论】：