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

问题

I'm designing my own Anki-Flashcards for learning Japanese:

I have three boxes of variable size in a line. The middle one should be centered and has a variable width. The boxes left and right shall be attached to the middle box. The three boxes as a group shall NOT be centered. I do NOT want them all the same size, neither the middle with a fixed size. I can not use JavaScript in the environment I am using.

If necessary I can fix the width of the right box (its an icon), but the left and middle box are variable.

I can achieve this using only the middle box and right box (see 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 [3] requires the boxes to be the same size.

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

I want the "note" line behaving like the "Japanese Pronounciation" line (see Fiddle), just attaching the note-part left.

EDIT: It seems its not yet clear what I want, so I try to 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   |

回答1:

Thanks to Paulie_D and the Topic here, I came up with a solution:

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

回答2:

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

来源：https://stackoverflow.com/questions/56891031/middle-box-centered-variable-width-left-and-right-float-directly-attached

标签

html

css

css-float

anki