中间框居中变宽，左右浮动直连

Question

我正在设计自己的用于学习日语的 Anki-Flashcards：

我有三个不同大小的盒子排成一行。中间的应该居中并且宽度可变。左边和右边的盒子应该附在中间的盒子上。三个框作为一组不应居中。我不希望它们的尺寸都一样，中间的尺寸也不固定。我使用的环境无法使用JavaScript。

如有必要，我可以固定右侧框（它是一个图标）的宽度，但左侧和中间框是可变的。

我可以仅使用中间框和右侧框来实现此目的（参见 Fiddle), but not additionally with the left box. Or I can move the outer boxes to the edges (and not towards the middle box), like here [1], but thats not what I want. Flexbox also does not what I want, see [2]. Also, this [] 要求框的大小相同。

HTML:

<div class="card">
 <span class="left">
  Note (e.g. uncommon): 
 </span>
 <span class="middle">
  Alt JP Pronounciation
 </span>
 <span class="right">
  Alt audio button
 </span>
</div>

CSS:

.left {
 position: absolute;
}
.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
 text-align: center;
}

我希望 "note" 行的行为类似于 "Japanese Pronounciation" 行（参见 Fiddle），只需在左侧附加注释部分即可。

编辑：似乎还不清楚我想要什么，所以我尝试ASCII-Art it:

        [Left (this also asdf)][Middle (this might be long)][Right]
           ^attached to middle        ^centered                ^attached to middle
        |   complete line is not centered, just the middle part   |

Answer 1

.right {
  float:left;
  border: 1px solid;
}
.middle {
  margin-left:3px;
  float:left;
  border: 1px solid;
}

Answer 2

感谢Paulie_D and the Topic ，我想出了一个解决方案：

HTML:

<div class="card">
 <div class="container">

  <span class="left">
   Note (e.g. uncommon): 
  </span>
  <span class="middle">
   Alt JP Pronounciation
  </span>
  <span class="right">
   Alt audio button
  </span>
 </div>
</div>

CSS:

.right {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: left;
}

.left {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: right;
}

.middle {
 border: 1px solid;
}

.container {
 display: flex;
}

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
 text-align: center;
}

中间框居中变宽，左右浮动直连

Middle box centered variable width, left and right float directly attached

html

css

css-float

anki