可能有一排 Div，每个具有不同的左侧起始位置和宽度，填充到相邻的兄弟姐妹？答案

【问题标题】：Possible to have a row of Divs each with different left starting positions and widths that fill to adjacent sibling?可能有一排 Div，每个具有不同的左侧起始位置和宽度，填充到相邻的兄弟姐妹？
【发布时间】：2019-11-01 16:32:20
【问题描述】：

我正在尝试找到一种将 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 填充自己的宽度到右侧的邻居？

【问题讨论】：

没有。这不可能。 “定位”每个元素的唯一方法是在相对容器中使用 actual position:absolute。如果你这样做了，那么元素就会从流程中取出，你就会回到你开始的地方。我不太清楚你在寻找什么效果，但 CSS-Grid 和 auto-fit/fill 可能是你的选择。
@Paulie_D，感谢您的意见。根据我的发现，我认为你是对的。无论如何，我想那是在黑暗中拍摄的。我只是希望找到一个解决方案，我可以轻松地将 div 插入一行其他 div，指定该 div 的左侧位置，并自动调整宽度。例如，如果我有一排两个 div，每个 200 像素，然后我在位置 100px 处插入一个额外的 div - 我的第一个 div 的宽度应该是 100px，第二个 div 的宽度是 100px，第三个仍然是200 像素宽。

标签： javascript html css angular angular2-template

【解决方案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;
  }
}

【讨论】：