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

【问题标题】：CSS/jQuery: Complex editable content inside layoutCSS/jQuery：布局内的复杂可编辑内容
【发布时间】：2017-02-24 05:42:10
【问题描述】：

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

我的布局是这样的：

Layout

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

【问题讨论】：

标签： javascript jquery html css layout

【解决方案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>

【讨论】：

太棒了！如此简单:) 谢谢！
将这一行代码 align-items: center; 添加到您的 .container 类中，以便按照他的要求对齐行和文本。