html - 如何在另一个 DIV 内并排对齐 3 个 DIV 并右对齐最后一个 DIV？

Question

我有一个要格式化的简单列表项。它包含 3 个 DIV。我希望第一个 DIV 左对齐，第二个 DIV 能够根据需要增长，第三个 DIV 右对齐。我将三个 DIV 并排堆叠在一起，但我不知道如何让最后一个 DIV 右对齐。这是现在的样子:

<li *ngFor="let script of scripts" [class.selected]="script === selectedScript" (click)="onSelect(script)">
      <div class="container">
        <div class="left">
          <span class="badge">{{script.scriptOrderID}}</span>
        </div>
        <div class="center">
          <span>{{script.scriptName}}</span>
        </div>
        <div class="right">
          <span class="badge2">{{script.scriptID}}</span>
        </div>
      </div>
    </li>

这就是我想要的样子:

.container { 
display: flex;
}

.left { 
width: 70px;
}

.center{ 
display: flex;
}

.right{
}

Answer 1

看看 flexbox，它易于使用，并且使用 flex-end 可以快速将 block 放在最后。

<div class="line">
  <div class="first_block">

  </div>
  <div class="text">
      Hello
  </div>
  <div class="second_block">

  </div>
</div>


.line {
  height : 40px;
  width : 100%;
  display : flex;
  flex-flow : row wrap;
  background-color : gray;
}

.first_block, .second_block {
  background-color : blue;
  width : 40px;
}

.text {
  flex-grow : 1;
}

JSFIDDLE向您展示结果。

干杯!