javascript - 可能有一行 Div，每个具有不同的左起始位置和宽度以填充相邻的同级？

Question

我正在尝试找到一种方法将 div 插入到容器中，并能够以像素为单位定义每个 div 的左侧起始位置，同时每个 div 自动具有填充到相邻兄弟节点左侧的宽度。我将有每个 div 的起始位置数组，因此可以计算 js 中每个 div 的宽度。但我希望有一个更优雅的解决方案。

我已经广泛搜索了解决方案，但到目前为止，我能找到的最好的解决方案是依赖于计算宽度的 flex 解决方案:

.s-container {
  height: 20px;
  background-color: red;
  min-width: 100%;
  display: flex;
}

.s-child {
  border-left: 1px solid black;
  background-color: yellow;
  height: 100%;
}

<div class="s-container">
  <div style="flex-basis:50px;" class="s-child">left: 0</div>
  <div style="flex-basis:100px;" class="s-child">left: 50px</div>
  <div style="flex-grow:1;" class="s-child">left: 150px</div>
</div>

是否可以在每个 div 上给出左侧位置，并让每个 div 将自己的宽度填充到右侧的邻居？

Answer 1

我想这已经晚了几天，但我写了一个解决方案，基本上是查看下一个兄弟的起始位置，以便在遍历它们时计算当前兄弟的宽度。我希望避免这样做，但实际上结果非常好。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class Slide  {
  px: number;    
}

@Component({
  selector: 'app-root',
  template: `
  <div class="s-container">
    <ng-container *ngFor="let s of slides; let i = index; let last = last">
      <div *ngIf="!last" [ngStyle]="{'flex-basis': getSlidePx(i + 1) - s.px + 'px'}" class="s-child">{{s.px}}</div>
      <div *ngIf="last" style="flex-grow:1;" class="s-child">{{s.px}}</div>
    </ng-container>
  </div>

  <form [formGroup]="newSlideForm" (ngSubmit)="onInsert()">

    <div class="form-group">
      <label>Pixels</label>
      <input type="number" class="form-control" required formControlName="Pixels" (change)="newSlide.px = $event.target.value" name="pixels">
    </div>

    <input type="submit" value="Insert" [disabled]="!newSlideForm.valid" />
  </form>
  `,
  styles: [`
    .s-container {
      height: 20px;
      background-color: red;
      min-width: 100%;
      display: flex;
    }

    .s-child {
      border-left: 1px solid black;
      background-color: yellow;
      height: 100%;
    }
  `]
})
export class AppComponent implements OnInit {
  newSlide: Slide;
  newSlideForm: FormGroup;
  slides: Array<Slide>;

  constructor(private _fb: FormBuilder){
    this.newSlide = new Slide();
    this.newSlideForm = this._fb.group({
      Pixels: [0, Validators.required]
    });
  }

  getSlidePx(n: number){
    if(n < this.slides.length)
      return this.slides[n].px;
  }

  onInsert(){
    this.slides.push(this.newSlide);
    this.slides.sort((a, b) => a.px - b.px);
    this.newSlide = new Slide();
  }

  ngOnInit(){
    let temp = [];

    let s1 = new Slide();
    s1.px = 0;
    temp.push(s1);

    let s2 = new Slide();
    s2.px = 100;
    temp.push(s2);

    let s3 = new Slide();
    s3.px = 210;
    temp.push(s3);

    let s4 = new Slide();
    s4.px = 300;
    temp.push(s4);

    let s5 = new Slide();
    s5.px = 499;
    temp.push(s5);

    let s6 = new Slide();
    s6.px = 650;
    temp.push(s6);

    this.slides = temp;
  }
}