如何让三个元素填充 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 没有静态宽度，所以我不能 determine the widths manually. I need the left and right divs to contain actual content (not just styling) so I can't really change the HTML。我正在寻找一种解决方案，它允许中心 div 具有任何宽度并强制左右 divs 填充剩余的水平 space.

有什么方法可以用 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>

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

How to have three elements fill a div, where center element has dynamic width?

html

css

width