html - 如何让三个元素填充一个 div，其中中心元素具有动态宽度？

Question

我正在尝试设计一个界面，供用户插入单词的前缀或后缀。理想情况下，单词(随机选择)将显示在 wrapper 的中央，然后两侧的文本框将延伸到 wrapper 的边缘。这是设置:

<div class="wrapper">
  <div class="left">{{text input}}</div>
  <div class="center">{{dynamic content}}</div>
  <div class="right">{{text input}}</div>
</div>

看起来像下面这样(下划线是文本输入字段，小写是可能的输入):

|________CONDITION________| => |____pre_CONDITION________| or |________CONDITION_al_____|
|__________ALLOW__________| => |______dis_ALLOW__________| or |__________ALLOW_ance_____|
|___________RUN___________| => |______over_RUN___________| or |___________RUN_ner_______|

我以前也遇到过类似的问题，但是一直没能找到解决这个问题的办法。中心 div 没有静态宽度，所以我不能 determine the widths manually .我需要左右 div 来包含实际内容(不仅仅是样式)所以我真的不能 change the HTML .我正在寻找一种解决方案，它允许中心 div 具有任意宽度并强制左右 div 填充剩余的水平空间。

有什么方法可以用 CSS 做到这一点吗？非常感谢您的宝贵时间。

Answer 1

使用flex

.wrapper {
  display: flex;
}
.left, .right {
  flex: 1;
  white-space: nowrap;
  border: 1px solid
}
.center {
  flex: 0;
  white-space: nowrap;
  border: 1px solid
}

<div class="wrapper">
  <div class="left">text input</div>
  <div class="center">dynamic content</div>
  <div class="right">text input</div>
</div>
<div class="wrapper">
  <div class="left">text input</div>
  <div class="center">dynamic content, longer</div>
  <div class="right">text input</div>
</div>

或者显示:表格

.wrapper {
  display: table-row;
}
.left, .right {
  display: table-cell;
  width: 50%;
  white-space: nowrap;
  border: 1px solid
}
.center {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  border: 1px solid
}

<div class="wrapper">
  <div class="left">text input</div>
  <div class="center">dynamic content</div>
  <div class="right">text input</div>
</div>
<div class="wrapper">
  <div class="left">text input</div>
  <div class="center">dynamic content, longer</div>
  <div class="right">text input</div>
</div>