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

Posted 2023-02-24

【中文标题】如何让三个元素填充一个 div，其中中心元素具有动态宽度？

【英文标题】：How to have three elements fill a div, where center element has dynamic width?

【发布时间】：2016-06-30 19:49:48

【问题描述】：

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

<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 做到这一点？非常感谢您的宝贵时间。

【参考方案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>

【讨论】：

这太完美了，非常感谢。我唯一需要更改的是宽度：.left 和 .right 的宽度为 50% 到 100%，以填充它们的表格单元格。