Возможно ли иметь ряд элементов Div, каждый из которых имеет разную левую начальную позицию и ширину, которые заполняют соседний брат?

Question

Я пытаюсь найти способ вставить элементы div в контейнер и иметь возможность определять левую начальную позицию в пикселях каждого из них, в то время как каждый элемент div автоматически имеет ширину, которая заполняется слева от соседнего брата.У меня будет массив начальных позиций для каждого деления, и поэтому я могу рассчитать ширину для каждого деления в js.Но я надеялся на более элегантное решение.

Я искал решение повсюду, но пока лучшее, что я могу найти, - это гибкое решение, основанное на расчете ширины:

.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, и каждый из них должен заполнить свою собственную ширину для соседа справа?

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