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

我有两个输入

textbox

，根据输入的大小动态增长。中间有一个小文本。问题是当

文本框

变宽时，它会与旁边的文本重叠

我正在寻找一种

HTML/CSS

样式，它允许我在

textbox

宽度增加时将文本推到右侧

非常感谢您的帮助。 谢谢

添加一些我的代码

。动态推送{
浮动：左；
}

在

确保它们的位置不是绝对的，也许可以将元素放在同一行的表格单元格中；您可以在html中定位表，而无需设置容器的宽度

<table>
    <tr>
        <td> <input type="text" /> </td>
        <td> <span> Generated text </span> </td>
        <td> <span> ditto </span> </td>
    </tr>
</table>

生成的文本
同上

如果元素绝对定位，它们将相对于z索引相互重叠。

---

否则，如果给它们的容器一个宽度，就无法达到预期的效果。

为什么不简单地将它们漂浮在容器内：

（演示包含放大文本框的动画）

HTML:

（当然，与适当的类交换div）

更新

感谢OP提供了更多的代码

但是，正如您在这个修改过的小提琴中所看到的：

问题不在DOM级别，因为框按预期推动和移动

---

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

取决于自动调整大小功能如何处理它。如果它调整第一个输入字段的宽度，您可以尝试flexbox：

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

---

你能发布一些代码或示例吗？在这种情况下，将div放在下面或其他地方不是更好的选择吗？我尝试了你的方法。现在的问题是，元素确实会被推，但速度不同。第二个div标记的移动速度比第一个输入标记慢。因此，一段时间后，它仍然与第二个div标记重叠。我已经使用jquery autosize.input插件为我的文本框获取了动态宽度。@user2597617由于没有显示任何代码/上下文，所以解析有点困难。可能有（很可能）其他因素影响。请在您的问题中显示一些您正在使用的代码。这将使我们更容易指出问题所在。

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

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

.mylittleflexcontainer {
   display: flex;
}
.mylittleflexcontainer:first-child {
   flex-grow: 1;
}