CSS / jQuery：布局内复杂的可编辑内容

Question

我有一个非常复杂的布局和可编辑的内容。

我的布局如下所示：

布局

整个元素的宽度为100％，两条线/边框将占用剩余的空间。 文本中的数字是可编辑的，因此文本的宽度可能会改变。 有人有使用jQuery或CSS的任何智能解决方案吗？

Answer 1

如果我错了，请有人纠正我，但我认为Flexbox会适应这种情况：

 .container { display: flex; } .line { flex-grow: 1; height: 2px; background: #000; } 

 <div class="container"> <div class="text">Text</div> <div class="line"></div> <div class="text">Text</div> <div class="line"></div> <div class="text">Text</div> </div>