中框居中可变宽度，左右浮动直接连接 [英] Middle box centered variable width, left and right float directly attached

问题描述

我正在设计自己的用于学习日语的Anki抽认卡:

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

我一行中有三个可变大小的盒子.中间的那条应该居中并具有可变的宽度.左侧和右侧的盒子应附在中间盒子上.三个框作为一个组不应居中.我不希望它们都具有相同的大小，中间也不要有固定的大小.我不能在使用的环境中使用JavaScript.

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.

我可以仅使用中间框和右框来实现此目的(请参见 Fiddle )，但不能另外使用与左框.或者，我可以将外部框移动到边缘(而不是中间框)，例如此处[ 2 ].另外，此[ 3 ]要求盒子的尺寸相同.

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

我希望"note"行的行为类似于"Japanese发音"行(请参阅 Fiddle )，只是将笔记部分附加在左侧.

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

似乎还不清楚我想要什么，所以我尝试对它进行ASCII艺术处理:

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   |

推荐答案

感谢 Paulie_D 和主题<在href ="https://stackoverflow.com/questions/55393088/align-3-unequal-blocks-left-center-and-right">此处，我想出了一个解决方案:

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

这篇关于中框居中可变宽度，左右浮动直接连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！