html - 当前一个元素的宽度动态增长时，如何将 html 元素推到右边？

Question

我有两个输入 textbox，它们会根据输入的大小动态增长。在它们之间有一个小文本。问题在于，当 textbox 的宽度增加时，它会与旁边的文本重叠。

我正在寻找一种 HTML/CSS 样式，它可以让我在 textbox 宽度增加时将文本推到右侧。

非常感谢任何帮助。 谢谢

添加我的一些代码。

.dynamic-push {
  float: left;
}

<div class="row dynamic-push">
  <div class="two columns dynamic-push ">
    <input id="contact-position" class="dynamic-push" value="" type="text" placeholder="Position" data-bind="value: Person().Position, valueUpdate: 'afterkeydown', afterRender: $('#contact-position').autosizeInput()" /> at
    <input id="contact-company" value="" type="text" placeholder="Company" data-bind="value: Person().Company, valueUpdate: 'afterkeydown', afterRender: $('#contact-company').autosizeInput()" />
  </div>
</div>

有剔除元素，我使用jquery autosize.input.js 插件来动态增加输入文本框的宽度。

现在，随着第一个 textbox 的增长，两个输入文本框之间的 'at' 被覆盖了。 希望你能弄清楚这里出了什么问题。如果您需要任何其他 CSS 代码，我也会分享这些代码

Answer 1

为什么不简单地将它们漂浮在容器中:

ONLINE DEMO

(演示包含放大文本框的动画)

HTML:

<div>
    <input><div>Box 1</div<div>Box 2</div
</div>

CSS:

div > input,
div > div {
    float:left;
}

(当然用适当的类交换 div)。

更新

感谢 OP 提供更多代码。

但是，正如您在这个修改后的 fiddle 中看到的那样:
http://jsfiddle.net/AbdiasSoftware/LxByQ/2/

问题不在 DOM 级别，因为盒子按预期插入和移动。

问题很可能出在处理字符等的 autosizeInput 函数中。延迟可能是由其处理方式引起的。由于未显示它的代码，因此很难找到确切的原因，但这是您首先要查看的地方。