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）我如何在下面图片中显示的位置上覆盖一个文本元素（如果文本比灰色部分“长”，它将在紫色部分继续）

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

希望这会有所帮助。