Question

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

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

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

我只能使用中间框和右边框（请参见Fiddle）来实现此目的，而不能使用左边框来实现。或者，我可以将外部框移到边缘（而不是向中间框移），例如此处[1]，但这不是我想要的。 Flexbox也不是我想要的，请参阅[2]。另外，此[3]要求盒子的大小相同。

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

我希望“注释”行的行为类似于“日语发音”行（请参阅Fiddle），只是将注释部分附加在左侧。

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

        [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

由于Paulie_D和主题here，我想出了一个解决方案：

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

Answer 2

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

中框居中可变宽度，左右浮动直接连接

2 个答案: