HTML

Question

我正在使用 Ionic2，我正在尝试显示一个行列表：每行分为左右两部分，具有适当的背景颜色。

这是我的代码（在一个简单的离子行中）

<ion-col col-6 [ngStyle]="{'background-color': leftColor}">Hi</ion-col>
<ion-col col-6 [ngStyle]="{'background-color': rightColor}"></ion-col>

这是结果

我想知道如何实现这两个步骤：

1) 我怎样才能获得固定高度（像素或类似）的行

2)如何在下图显示的位置叠加一个文本元素（如果文本比灰色部分"longer"，它将在紫色部分继续）

Answer 1

我不是 Ionic 网格系统的忠实粉丝，我认为它太复杂了，您可以使用 CSS 网格轻松完成。在你的情况下，你需要覆盖一些 CSS 网格系统，这可能会与你页面中的另一个 CSS 冲突，所以我建议使用 CSS 网格而不是 Ionic 网格。

HTML:

<div class="component">
  <p>A REALLY LOOOOOOOOOOOO OOOOOOOOOOOOO OOOOOOOOONG TEXT</p>
  <div class="grid">
    <div class="bg-1" [ngStyle]="{'background-color': leftColor}"></div>
    <div class="bg-2" [ngStyle]="{'background-color': rightColor}"></div>
  </div>
</div>

CSS

.component {
  position: relative;

  p {
    position: absolute;
  }

  .grid {
    display: grid;
    grid-template: 90px / 1fr 1fr;
    // the first argument here is the height of the line, the second is how you divide your grid, in this case 2 columns that take both 1 fraction of the total width
  }
}

HTML - 叠加元素

HTML - Overlay Elements

ionic-framework

ionic2