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

Question

我试图为用户设计一个界面来插入一个单词的前缀或后缀。理想情况下，单词(随机选择)将显示在包装器的中心，然后两侧的文本框将拉伸到包装器的边缘。下面是设置:

<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没有静态宽度，所以我无法手动确定宽度。我需要左右div包含实际内容(不只是样式)，所以我不能真正更改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>

或display: table

.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>