javascript - 如何使关键字固定在中心，而左右部分靠近它？

Question

一个句子包含3个部分，左边的关键词和右边的部分。
我需要实现关键字固定在一条垂直线上，而其他两个部分靠近它。
我是通过绝对定位实现的，但是关键字的长度不一样。
它将显示如下图。
如何使其灵活？
我的方法是这样的:

 .left-part{
       position: absolute;
       right : 300px;
       text-align: right;
    }
 .right-part{
       position: absolute;
       left : 200px;
 }
 .keyword{
       margin: 0 50%;
 }

太长了 正常的
过短

Answer 1

您可以使用display:table;(或者也可以使用 CSS3 的 flex-box)

使用 table 将第一个单元格和最后一个单元格的宽度设置为 50%。
我知道 50% + 50% 等于 100%，但表格会自动为您处理中间的单元格宽度:

.table{
  display:         table;
  width:           100%;
}
.row {
  display:         table-row;
}
.row span {
  display:         table-cell;
  padding:         8px;
  border-bottom:   1px solid #ddd; 
}
.row span:first-child {
  text-align:      right;
  width:           50%;              /* FIRST CELL TO 50% */
}
.row span:last-child {
  width:           50%;              /* LAST CELL TO 50% */
}
.row span:nth-child(2) {
  color:           red;              /* MIDDLE CELL*/
                                     /* LEAVE WIDTH UNTOUCHED */
}

<div class="table">

  <div class="row">
    <span>ACDC</span>
    <span>DANGEROUS</span>
    <span>Back in Black</span>
  </div>

  <div class="row">
    <span>DJ StackOverflow</span>
    <span>DANGEROUS</span>
    <span>foobar</span>
  </div>

  <div class="row">
    <span>Antonio Vivaldi</span>
    <span>DANGEROUS</span>
    <span>Four Seasons</span>
  </div>

</div>

_{你是这个意思吗？}