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。我需要左边和右边的div来包含实际内容（不仅仅是样式）所以我不能真正change the HTML。我正在寻找一种解决方案，它允许中心div具有任何宽度，并强制左右div填充剩余的水平空间。

有没有办法用CSS做到这一点？非常感谢你的时间。

Answer 1

使用IDictionary

declare module System.Collections.Generic {
    interface IDictionary<TKey extends String, TValue> {
        [key: string]: TValue;
    }
}
declare module System.Collections {
    interface IDictionary {
        [key: string]: any;
    }
}

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

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

1 个答案: