2：3宽高比按钮网格与rowspan

Question

我已经挣扎了很长一段时间; 我试图做一个停车位列表，这样就有两列， 左边是垂直点，纵横比为1：2，右边是水平点，纵横比为2：1。

我试图使用Ionic的网格来实现这一点，这是我最接近的，但仍然没有完全实现：

注意＃18

点下方的空白区域

我想要的是什么：

也许有一种更简单的方式来获得保持宽高比的响应式布局？

的layout.html

<ion-item>
    <div class="row">
        <div class="col col-33 no-padding">
            <div class="col no-padding">
                <button class="button spot-tall">18</button>

            </div>
        </div>
        <div class="col col-66 no-padding">
            <div>
                <button class="button spot-wide">12</button>
            </div>
            <div>
                <button class="button spot-wide">11</button>
            </div>
        </div>
    </div>
</ion-item>

的style.css

.spot-tall {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 50%;
  padding-bottom: 50%
}

.spot-wide {
  width: 100%;
  padding-top: 12.5%;
  padding-bottom: 12.5%
}

.no-padding {
    padding: 0px !important;
  border: 1px solid black;
}

Answer 1

我在这里更新了你的css课程，它对我有用。请检查一下

.spot-tall {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 50%;
  padding-bottom: 70%
}

.spot-wide {
  width: 100%;
  padding-top: 12.5%;
  padding-bottom: 14.6%
}

.no-padding {
    padding: 0px !important;
  border: 1px solid black;
}